chore: update front page website (#3317)

* chore: update front page website * Update UsedBy.tsx * update links
verdaccio · Aug 20, 2022 · 3f5a1ee · 3f5a1ee
1 parent bf0f331
commit 3f5a1ee
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 25 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -59,7 +59,7 @@ module.exports = {
     announcementBar: {
       id: 'announcementBar',
       content:
-        '<a target="_blank" rel="noopener noreferrer" href="https://donate.redcrossredcrescent.org/ua/donate/~my-donation?_cv=1">Help provide humanitarian support to Ukraine refugees</a>!',
+        '<a target="_blank" rel="noopener noreferrer" href="https://www.wfp.org/support-us/stories/ukraine-appeal">Help provide humanitarian support to Ukraine refugees</a>!',
         isCloseable: false,
         backgroundColor: '#1595de',
         textColor: '#ffffff',

diff --git a/website/package.json b/website/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@verdaccio/website",
-  "version": "5.13.0",
+  "version": "5.14.0",
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
@@ -37,7 +37,9 @@
     "docusaurus-plugin-contributors": "workspace:1.0.0",
     "docusaurus-plugin-sentry": "1.0.0",
     "react": "17.0.2",
+    "react-player": "2.10.1",
     "react-dom": "17.0.2",
+    "usehooks-ts": "2.6.0",
     "react-twitter-widgets": "^1.10.0",
     "use-is-in-viewport": "^1.0.9"
   },

diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx
@@ -3,14 +3,17 @@ import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import React from 'react';
+import ReactPlayer from 'react-player/youtube'
 import { Follow } from 'react-twitter-widgets';
 import cx from 'classnames';
+import { useMediaQuery } from 'usehooks-ts'
 
 import Command from './Command';
 import styles from './Header.module.scss';
 
 const Header = (): React.ReactElement => {
   const { i18n } = useDocusaurusContext();
+  const matches = useMediaQuery('(min-width: 768px)')
   return (
     <div className={styles.header}>
       <div className={styles['header--wrap']}>
@@ -32,7 +35,7 @@ const Header = (): React.ReactElement => {
               <Translate>GET STARTED</Translate>
             </Link>
             <a
-              href="https://donate.redcrossredcrescent.org/ua/donate/~my-donation?_cv=1"
+              href="https://www.wfp.org/support-us/stories/ukraine-appeal"
               className={cx('link-secondary', 'specialButton')}
             >
               <Translate>DONATE</Translate>
@@ -43,8 +46,11 @@ const Header = (): React.ReactElement => {
           <Command
             command="npm install --global verdaccio"
             alt={translate({ message: 'NPM command to install Verdaccio' })}
-          />
-        </div>       
+          />          
+        </div>      
+        {matches && <div className={styles['header--m-2']}>
+          <ReactPlayer url='https://www.youtube.com/watch?v=qRMucS3i3kQ' controls />
+        </div>}
       </div>
       <div className={styles['header--absolute-links']}>
         <div>
@@ -54,6 +60,7 @@ const Header = (): React.ReactElement => {
           />
         </div>
       </div>
+
     </div>
   );
 };

diff --git a/website/src/components/Testimonials.tsx b/website/src/components/Testimonials.tsx
@@ -24,6 +24,8 @@ const Testimonials = (): React.ReactElement => (
           ['1286258971456811010', '1285676039323160584', '1261263709143543809'],
           ['1175273963036917760', '1171473043077550082', '1172204609508499456'],
           ['1164950797064515584', '1113478980169011201', '1111941723297644545'],
+          ['1557651045085593600', '1550730341240819714', '1546494545600204800'],
+          ['1480362520477147143', '1479187636451516416', '1423034969123958793'],
         ]}
       />
     </div>

diff --git a/website/src/components/UsedBy.tsx b/website/src/components/UsedBy.tsx
@@ -8,9 +8,9 @@ import styles from './UsedBy.module.scss';
 
 const UsedBy = (): React.ReactElement => (
   <section className={styles.usedBy}>
-    <div className={styles['usedBy--main']}>
+    <div className={styles['usedBy--main']}>    
       <b>
-        <Translate>SPONSORED BY</Translate>
+        <Translate>USED BY</Translate>
       </b>
       {[
         {
@@ -23,33 +23,20 @@ const UsedBy = (): React.ReactElement => (
           image: useBaseUrl('/img/sponsors/gatsbysvg.svg'),
           url: 'https://www.gatsbyjs.com/',
         },
-      ].map((sponsor) => (
-        <SponsorImage
-          key={sponsor.name}
-          name={sponsor.name}
-          image={sponsor.image}
-          url={sponsor.url}
-        />
-      ))}
-      <Divider vertical />
-      <b>
-        <Translate>USED BY</Translate>
-      </b>
-      {[
         {
           name: 'pnpm',
           image: useBaseUrl('/img/sponsors/pnpm.svg'),
           url: 'https://pnpm.io',
         },
         {
-          name: 'React',
+          name: 'create-react-app',
           image: useBaseUrl('/img/sponsors/react.svg'),
-          url: ' https://reactjs.org',
+          url: ' https://create-react-app.dev/',
         },
         {
-          name: 'Angular',
+          name: 'Angular CLI',
           image: useBaseUrl('/img/sponsors/angular.svg'),
-          url: 'https://angular.io',
+          url: 'https://angular.io/cli',
         },
         {
           name: 'vendure',

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -1,6 +1,7 @@
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import React from 'react';
+import ReactPlayer from 'react-player/youtube'
 
 import Feature from '../components/Features';
 import Header from '../components/Header';
@@ -18,9 +19,10 @@ const Home = (): React.ReactElement => {
       <header className={styles.header}>
         <Wave />
         <Header />
+
       </header>
       <main className={styles.main}>
-        <UsedBy />
+        <UsedBy />        
         <WhatIsVerdaccio />
         <Feature />
         <PackageManagers />