Merge pull request #894 from verdaccio/fix-825

docs(website): add team member page

website/data/team.yml

@@ -0,0 +1,84 @@
+admons:
+  - name: Trent Earl
+    github: trentearl
+    role: founder
+  - name: John Wilkinson
+    github: jmwilkinson
+    role: founder
+  - name: Juan Picado
+    github: juanpicado
+    twitter: jotadeveloper
+    role: admin/core
+  - name: Ayush Sharma
+    github: ayusharma
+    twitter: ayusharma_
+    role: admin/core
+  - name: Sergio Hg
+    github: sergiohgz
+    role: core
+  - name: Meeeeow
+    github: Meeeeow
+    role: core
+maintainers:
+  - name: Verdaccio
+    github: verdacciobot
+    twitter: verdaccio_npm
+    role: bot
+  - name: Roger Meier
+    github: bufferoverflow
+    active: true
+  - name: Cameron Little
+    github: apexskier
+    active: true
+  - name: Priscila
+    github: priscilawebdev
+    twitter: priscilawebdev
+    active: true
+  - name: Keli Grubb
+    github: kgrubb
+    active: true
+  - name: Lucius Gaitán
+    github: lgaitan
+    active: true
+  - name: Diego Louzán
+    github: dlouzan
+    active: true
+  - name: Dharmender-Singh
+    github: Dharmender-Singh
+    active: true
+translators:
+  spanish:
+    - name: María Eugenia Lucena
+      crowdin: marugy99
+      role: proofreader
+    - name: Samuel Miller
+      crowdin: SamuelLMiller
+      role: translator
+    - name: isabella394
+      crowdin: isabella394
+      role: translator
+    - name: Alejandro Estévez
+      crowdin: acrywhif
+      role: translator
+  chinese:
+    - name: sunray
+      crowdin: sunray
+      role: proofreader
+    - name: aafeng
+      crowdin: aafeng
+      role: proofreader
+    - name: susanli3769
+      crowdin: emmali73
+      role: translator
+    - name: Samuel Miller
+      crowdin: SamuelLMiller
+      role: translator
+    - name: Aaron Li
+      crowdin: AaronLi
+      role: translator
+    - name: victory
+      crowdin: victory622
+      role: translator
+    - name: breathewind
+      crowdin: breathewind
+      role: translator

website/i18n/en.json

@@ -35,9 +35,11 @@
     "what-is-verdaccio": "What is Verdaccio?",
     "windows": "Installing As a Windows Service",
     "Docs": "Docs",
-    "Help": "Help",
     "Blog": "Blog",
+    "Help": "Help",
     "GitHub": "GitHub",
+    "Team": "Team",
+    "Donate": "Donate",
     "Introduction": "Introduction",
     "Configuration": "Configuration",
     "Server": "Server",

website/package.json

@@ -11,6 +11,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "docusaurus": "1.3.2"
+    "docusaurus": "1.3.2",
+    "js-yaml": "^3.12.0"
   }
 }

website/pages/en/team.js

@@ -0,0 +1,179 @@
+const React = require('react');
+const CompLibrary = require('../../core/CompLibrary.js');
+const Container = CompLibrary.Container;
+const siteConfig = require(process.cwd() + '/siteConfig.js');
+
+const NetworkLink = props => {
+  if (props.text) {
+    return (
+      <div>
+        <img
+          style={{ marginRight: 4 }}
+          height={props.size}
+          width={props.size}
+          src={props.iconSource}
+          alt={props.iconAlt}
+        />
+        <a href={props.url} target="_blank" rel="noreferrer noopener">
+          <span className="anchor_text">{props.text}</span>
+        </a>
+      </div>
+    );
+  } else return null;
+};
+
+const Member = ({ member, imageSize }) => {
+  const { github, twitter, name, crowdin, role, active } = member;
+  const avatarUrl = `https://avatars.githubusercontent.com/${github}`;
+  const twitterUrl = `https://twitter.com/${twitter}`;
+  const githubUrl = `https://github.com/${github}`;
+  const crowdinUrl = `https://crowdin.com/profile/${crowdin}`;
+  const size = imageSize || 100;
+
+  // to disable an member it has to be strictly false
+  if (!active && active === false) {
+    return null;
+  }
+
+  return (
+    <div className="member_media_object">
+      <div>
+        <h5>
+          <div>
+          {name}
+          </div>
+          <div className="team_role">
+            {role ? `${role}` : ''}
+          </div>
+          </h5>
+      </div>
+      <div className="member_avatar">
+        <img src={avatarUrl} height={size} width={size} alt="{{name}}" />
+      </div>
+      <div className="member_info">
+        <NetworkLink
+          iconAlt="github"
+          iconSource={`/svg/social/github.svg`}
+          size="16"
+          url={githubUrl}
+          text={github}
+        />
+        <NetworkLink
+          iconAlt="twitter"
+          iconSource="/svg/social//twitter.svg"
+          size="16"
+          url={twitterUrl}
+          text={twitter}
+        />
+        <NetworkLink
+          iconAlt="crowdin"
+          iconSource="/svg/social/crowdin.ico"
+          size="16"
+          url={crowdinUrl}
+          text={crowdin}
+        />
+      </div>
+    </div>
+  );
+};
+
+const MemberSection = props => {
+  return (
+    <div className="member_section">
+      <h2 className="member_title">{props.title}</h2>
+      <div className="member_group">
+        {props.members.map(member => {
+          return <Member
+            key={member.github}
+            member={member}
+            imageSize={props.imageSize} />;
+        })}
+      </div>
+    </div>
+  );
+};
+
+
+
+const TranslatorMemberSections = props => {
+  return (
+    <div className="member_section">
+      <h4 className="language_title">{props.title}</h4>
+      <div>
+        <div>
+          <div className="member_group">
+            {props.translator.map(member => {
+              return <Member
+                key={member.crowdin}
+                member={member}
+                imageSize={60} />;
+            })}
+        </div>
+      </div>
+      </div>
+    </div>
+  );
+};
+
+const LanguagesGroups = props => {
+  const languages = Object.keys(props.languages);
+
+  return (
+    <div>
+      <h3 className="member_type translator_type">{props.title}</h3>
+      <div className="translator_group">
+        {languages.map((function(language) {
+          const lang = props.languages[language];
+
+          return <TranslatorMemberSections
+            key={language}
+            title={language}
+            translator={lang}/>;
+        }))}
+      </div>
+    </div>
+  );
+};
+
+const CrowdingTranslators = props => {
+  return (
+    <div className="translation_section">
+      <h2>
+        Crowding Translators
+      </h2>
+      <div>
+        <LanguagesGroups languages={props.translators}/>
+      </div>
+    </div>
+  );
+};
+
+const BannerTitle = () => {
+  return (
+    <h1 className="banner_members_title">
+      Team Members
+    </h1>
+  );
+};
+
+
+class Team extends React.Component {
+  render() {
+    const {admons, maintainers, translators} = siteConfig.team;
+
+    return (
+      <div className="mainContainer">
+        <Container padding={['bottom']}>
+          <BannerTitle/>
+          <div class="team_container">
+            <MemberSection title="Core" members={admons} imageSize={100}/>
+            <MemberSection title="Maintainers" members={maintainers} imageSize={80}/>
+            <CrowdingTranslators translators={translators} />
+          </div>
+        </Container>
+      </div>
+    );
+  }
+}
+
+module.exports = Team;

website/pages/en/users.js

@@ -1,12 +1,4 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 const React = require('react');
-
 const CompLibrary = require('../../core/CompLibrary.js');
 const Container = CompLibrary.Container;
 const translate = require("../../server/translate.js").translate;

website/siteConfig.js

@@ -1,11 +1,7 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 
-/* List of projects/orgs using your project for the users page */
+const {loadYaml} = require('./utils');
+
+const team = loadYaml("./data/team.yml");
 const users = [
   {
     caption: "Filiosoft",
@@ -69,11 +65,15 @@ const siteConfig = {
   projectName: 'verdaccio',
   headerLinks: [
     { doc: 'installation', label: 'Docs'},
-    { page: 'help', label: 'Help'},
     { href: "https://medium.com/verdaccio", label: 'Blog'},
-    { href: "https://github.com/verdaccio", label: "GitHub" }
+    { page: 'help', label: 'Help'},
+    { href: "https://github.com/verdaccio", label: "GitHub" },
+    { search: true },
+    { page: 'team', label: 'Team'},
+    { href: "https://opencollective.com/verdaccio", label: "Donate" },
   ],
   users,
+  team,
   headerIcon: 'img/verdaccio-tiny.png',
   footerIcon: 'img/verdaccio-blackwhite.png',
   favicon: 'img/favicon.ico',
@@ -82,7 +82,6 @@ const siteConfig = {
     secondaryColor: '#205C3B',
   },
   translationRecruitingLink: 'https://crowdin.com/project/verdaccio',
-  // This copyright info is used in /core/Footer.js and blog rss/atom feeds.
   copyright:
     'Copyright © ' + new Date().getFullYear() + ' Verdaccio community',
   // organizationName: 'deltice', // or set an env variable ORGANIZATION_NAME
@@ -105,7 +104,6 @@ const siteConfig = {
   stylesheets: [
       '/css/code-blocks-buttons.css',
   ],
-  // You may provide arbitrary config keys to be used as needed by your template.
   repoUrl: 'https://github.com/verdaccio/verdaccio',
   cleanUrl: true,
   scrollToTop: true,

website/static/css/custom.css

@@ -1,22 +1,13 @@
-/* your custom css */
-
-/*.mainContainer .wrapper code {*/
-  /*padding: 2px;*/
-  /*font-family: inherit;*/
-/*}*/
-
 .mainContainer .wrapper a,
 .inner .projectIntro a {
-  background-color: rgba(10, 78, 31, 0.15);
   color: #1a1a1a;
   transition: all 0.25s ease-out;
-  text-decoration: underline;
+  text-decoration: none;
 }
 
 .mainContainer .wrapper a:hover,
 .inner .projectIntro a:hover {
-  background-color: rgba(10, 78, 31, 0.35);
+  text-decoration: underline;
-  text-decoration: none !important;
 }
 
 .feature-section .blockContent {
@@ -47,17 +38,92 @@
   margin: 0 auto !important;
 }
 
-/*@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {*/
+/** team **/
-/*}*/
 
-/*@media only screen and (min-width: 1024px) {*/
+.banner_members_title {
-/*}*/
+  margin-top: 0;
+}
 
-/*@media only screen and (max-width: 1023px) {*/
+.team_container a,
-/*}*/
+.team_container a:hover {
+  font-size: 80%;
+  text-decoration: none;
+}
 
-/*@media only screen and (min-width: 1400px) {*/
+.member_group {
-/*}*/
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.member_media_object {
+  width: 15%;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+
+.member_media_object .team_role {
+  font-size: 80%;
+}
+
+@media (min-width: 1281px) {
+  .member_media_object {
+    width: 15%
+  }
+}
+
+@media (min-width: 1025px) and (max-width:1280px) {
+  .member_media_object {
+    width: 33.3%
+  }
+}
+
+@media (min-width: 768px) and (max-width:1024px) {
+  .member_media_object {
+    width: 50%
+  }
+}
+
+@media (min-width: 768px) and (max-width:1024px) and (orientation:landscape) {
+  .member_media_object {
+    width: 50%
+  }
+}
+
+@media (min-width: 481px) and (max-width:767px) {
+  .member_media_object {
+    width: 100%
+  }
+}
+
+@media (min-width: 320px) and (max-width:480px) {
+  .member_media_object {
+    width: 100%
+  }
+}
+
+.member_section {
+  width: 100%;
+}
+
+.member_section .language_title {
+  text-transform: capitalize;
+  margin-bottom: 5px;
+  margin-top: 10px;
+}
+
+.member_info {
+  line-height: 1.7;
+}
+
+.member_info > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.member_avatar > img {
+  border-radius: 50px;
+  border: 1px solid #4b5e40;
+}
 
-/*@media only screen and (min-width: 1500px) {*/
-/*}*/

website/static/svg/social/github.svg

@@ -0,0 +1,3 @@
+<svg height="1024" width="1024" xmlns="http://www.w3.org/2000/svg">
+  <path d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.688 418.125 350.156 485.812 25.594 4.688 34.938-11.125 34.938-24.625 0-12.188-0.469-52.562-0.719-95.312C242 908.812 211.906 817.5 211.906 817.5c-23.312-59.125-56.844-74.875-56.844-74.875-46.531-31.75 3.53-31.125 3.53-31.125 51.406 3.562 78.47 52.75 78.47 52.75 45.688 78.25 119.875 55.625 149 42.5 4.654-33 17.904-55.625 32.5-68.375C304.906 725.438 185.344 681.5 185.344 485.312c0-55.938 19.969-101.562 52.656-137.406-5.219-13-22.844-65.094 5.062-135.562 0 0 42.938-13.75 140.812 52.5 40.812-11.406 84.594-17.031 128.125-17.219 43.5 0.188 87.312 5.875 128.188 17.281 97.688-66.312 140.688-52.5 140.688-52.5 28 70.531 10.375 122.562 5.125 135.5 32.812 35.844 52.625 81.469 52.625 137.406 0 196.688-119.75 240-233.812 252.688 18.438 15.875 34.75 47 34.75 94.75 0 68.438-0.688 123.625-0.688 140.5 0 13.625 9.312 29.562 35.25 24.562C877.438 930 1024 738.125 1024 512 1024 229.25 794.75 0 512 0z" />
+</svg>

website/static/svg/social/twitter.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+   width="300"
+   height="300">
+<path d="m 250,87.974 c -7.358,3.264 -15.267,5.469 -23.566,6.461 8.471,-5.078 14.978,-13.119 18.041,-22.701 -7.929,4.703 -16.71,8.117 -26.057,9.957 -7.484,-7.975 -18.148,-12.957 -29.95,-12.957 -22.66,0 -41.033,18.371 -41.033,41.031 0,3.216 0.363,6.348 1.062,9.351 -34.102,-1.711 -64.336,-18.047 -84.574,-42.872 -3.532,6.06 -5.556,13.108 -5.556,20.628 0,14.236 7.244,26.795 18.254,34.153 -6.726,-0.213 -13.053,-2.059 -18.585,-5.132 -0.004,0.171 -0.004,0.343 -0.004,0.516 0,19.88 14.144,36.464 32.915,40.234 -3.443,0.938 -7.068,1.439 -10.81,1.439 -2.644,0 -5.214,-0.258 -7.72,-0.736 5.222,16.301 20.375,28.165 38.331,28.495 -14.043,11.006 -31.735,17.565 -50.96,17.565 -3.312,0 -6.578,-0.194 -9.788,-0.574 18.159,11.643 39.727,18.437 62.899,18.437 75.473,0 116.746,-62.524 116.746,-116.747 0,-1.779 -0.04,-3.548 -0.119,-5.309 8.017,-5.784 14.973,-13.011 20.474,-21.239 z" style="fill:#3aaae1" />
+</svg>

website/utils.js

@@ -0,0 +1,11 @@
+const path = require("path");
+const fs = require("fs");
+const parseYaml = require("js-yaml").safeLoad;
+
+function loadYaml(fsPath) {
+  return parseYaml(fs.readFileSync(path.join(__dirname, fsPath), "utf8"));
+}
+
+module.exports = {
+  loadYaml
+};