feat(about): add contributors section

- add contributors generating script - adjust contributors ordering
tomastrajan · Aug 13, 2018 · 35d67a6 · 35d67a6
1 parent 7aa3820
commit 35d67a6
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 34 deletions.
diff --git a/.all-contributors-html.js b/.all-contributors-html.js
@@ -0,0 +1,23 @@
+const fs = require('fs');
+
+const SOURCE = '.all-contributorsrc';
+const TARGET = './src/app/static/about/about.component.html';
+const TOKEN_START = '<!-- ALL-CONTRIBUTORS-LIST:START -->';
+const TOKEN_END = '<!-- ALL-CONTRIBUTORS-LIST:END -->';
+const PATTERN = new RegExp(`${TOKEN_START}[\\s\\S]*${TOKEN_END}`, 'gim');
+
+const contributors = JSON.parse(fs.readFileSync(SOURCE, 'utf8')).contributors;
+const content = fs.readFileSync(TARGET, 'utf8');
+
+const data = contributors.map(c => `
+  <a class="contributor" href="${c.profile}" target="_blank">
+    <img src="${c.avatar_url}">  
+    <span>${c.name}</span>
+  </a>
+`).join('\n');
+const replacement = `${TOKEN_START}${data}${TOKEN_END}`;
+const adjustedContent = content.replace(PATTERN, replacement);
+
+fs.writeFileSync(TARGET, adjustedContent);
+
+console.log(`${contributors.length} contributors added to HTML`);
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -9,18 +9,18 @@
   "imageSize": 100,
   "commit": false,
   "contributors": [
-      {
-        "login": "tomastrajan",
-        "name": "Tomas Trajan",
-        "avatar_url": "https://avatars0.githubusercontent.com/u/3764868?v=4",
-        "profile": "https://medium.com/@tomastrajan",
-        "contributions": [
-          "code",
-          "doc",
-          "test",
-          "design",
-          "blog"
-        ]
+    {
+      "login": "tomastrajan",
+      "name": "Tomas Trajan",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/3764868?v=4",
+      "profile": "https://medium.com/@tomastrajan",
+      "contributions": [
+        "code",
+        "doc",
+        "test",
+        "design",
+        "blog"
+      ]
     },
     {
           "login": "timdeschryver",
@@ -45,6 +45,16 @@
         "bug"
       ]
     },
+    {
+      "login": "hhubik",
+      "name": "hhubik",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/14813201?v=4",
+      "profile": "https://github.com/hhubik",
+      "contributions": [
+        "code",
+        "doc"
+      ]
+    },
     {
       "login": "mumairofficial",
       "name": "Muhammad Umair",
@@ -101,16 +111,6 @@
         "code",
         "bug"
       ]
-    },
-    {
-      "login": "hhubik",
-      "name": "hhubik",
-      "avatar_url": "https://avatars0.githubusercontent.com/u/14813201?v=4",
-      "profile": "https://github.com/hhubik",
-      "contributions": [
-        "code",
-        "doc"
-      ]
     }
   ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "prettier:ci": "prettier {src,e2e}/**/*.{ts,json,md,scss} --list-different",
     "analyze": "npm run clean && npm run build:prod -- --stats-json && webpack-bundle-analyzer ./dist/stats.json",
     "contributors:add": "all-contributors add",
-    "contributors:generate": "all-contributors generate",
+    "contributors:generate": "all-contributors generate && node .all-contributors-html.js",
     "contributors:check": "all-contributors check"
   },
   "husky": {

diff --git a/src/app/static/about/about.component.html b/src/app/static/about/about.component.html
@@ -72,3 +72,85 @@ <h2>{{ 'anms.about.get-notified' | translate }}</h2>
     <img [src]="releaseButler" alt="Release Butler tweet example">
   </div>
 </div>
+<div class="container">
+  <div class="contributors" [ngClass]="routeAnimationsElements">
+    <h2>{{ 'anms.about.contributors' | translate }}</h2>
+    <p>{{ 'anms.about.contributors.description1' | translate }}</p>
+    <p>{{ 'anms.about.contributors.description2' | translate }}</p>
+    <p>
+      {{ 'anms.about.contributors.description3' | translate }}
+      <a href="https://github.com/tomastrajan/angular-ngrx-material-starter/issues"
+         target="_blank">{{'anms.about.contributors.issues' | translate}}</a>
+      {{ 'anms.about.contributors.description4' | translate }}
+      <a
+        href="https://github.com/tomastrajan/angular-ngrx-material-starter/blob/master/CONTRIBUTING.md"
+        target="_blank">{{'anms.about.contributors.guide' | translate}}</a>
+      ...
+    </p>
+
+    <div class="contributors-wrapper">
+
+      <!-- ALL-CONTRIBUTORS-LIST:START -->
+      <a class="contributor" href="https://medium.com/@tomastrajan" target="_blank">
+        <img src="https://avatars0.githubusercontent.com/u/3764868?v=4">
+        <span>Tomas Trajan</span>
+      </a>
+
+
+      <a class="contributor" href="https://twitter.com/tim_deschryver" target="_blank">
+        <img src="https://avatars1.githubusercontent.com/u/28659384?v=4">
+        <span>Tim Deschryver</span>
+      </a>
+
+
+      <a class="contributor" href="http://gs500coder.blogspot.com" target="_blank">
+        <img src="https://avatars0.githubusercontent.com/u/1336862?v=4">
+        <span>Moshe</span>
+      </a>
+
+
+      <a class="contributor" href="https://github.com/hhubik" target="_blank">
+        <img src="https://avatars0.githubusercontent.com/u/14813201?v=4">
+        <span>hhubik</span>
+      </a>
+
+
+      <a class="contributor" href="https://github.com/mumairofficial" target="_blank">
+        <img src="https://avatars2.githubusercontent.com/u/6498132?v=4">
+        <span>Muhammad Umair</span>
+      </a>
+
+
+      <a class="contributor" href="https://github.com/philmerrell" target="_blank">
+        <img src="https://avatars2.githubusercontent.com/u/2514268?v=4">
+        <span>Phil Merrell</span>
+      </a>
+
+
+      <a class="contributor" href="https://www.linkedin.com/in/kharshats" target="_blank">
+        <img src="https://avatars3.githubusercontent.com/u/1059539?v=4">
+        <span>Valery Kharshats</span>
+      </a>
+
+
+      <a class="contributor" href="https://1nv1n.GitHub.io/" target="_blank">
+        <img src="https://avatars1.githubusercontent.com/u/3885804?v=4">
+        <span>Neil Pathare</span>
+      </a>
+
+
+      <a class="contributor" href="http://peterkrieg.com" target="_blank">
+        <img src="https://avatars0.githubusercontent.com/u/7385488?v=4">
+        <span>Peter Krieg</span>
+      </a>
+
+
+      <a class="contributor" href="https://github.com/alexkonovalov" target="_blank">
+        <img src="https://avatars1.githubusercontent.com/u/11887873?v=4">
+        <span>Alex</span>
+      </a>
+      <!-- ALL-CONTRIBUTORS-LIST:END -->
+
+    </div>
+  </div>
+</div>
diff --git a/src/app/static/about/about.component.scss b/src/app/static/about/about.component.scss
@@ -90,7 +90,7 @@ h2 {
 
 .follow-releases {
   max-width: 700px;
-  margin: 0 auto 80px auto;
+  margin: 0 auto 60px auto;
 
   p {
     line-height: 40px;
@@ -110,6 +110,45 @@ h2 {
   }
 }
 
+.contributors {
+  max-width: 700px;
+  margin: 0 auto 60px auto;
+
+  p {
+    a {
+      border-bottom: 3px solid;
+    }
+  }
+
+  .contributors-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    a {
+      margin: 10px;
+      width: 100px;
+      display: inline-block;
+      text-align: center;
+
+      span {
+        display: inline-block;
+        padding: 10px 0 0 0;
+        line-height: 16px;
+      }
+
+      img {
+        border-radius: 50%;
+        width: 100px;
+        border: 5px solid;
+        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+        0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+      }
+    }
+  }
+}
+
 @media (max-width: map-get($grid-breakpoints, md)) {
   .background {
     .actions {

diff --git a/src/app/static/about/about.component.scss-theme.scss b/src/app/static/about/about.component.scss-theme.scss
@@ -22,7 +22,8 @@
       }
     }
 
-    .follow-releases {
+    .follow-releases,
+    .contributors {
       p {
         background-color: mat-color($background, background);
 
@@ -35,5 +36,11 @@
         }
       }
     }
+
+    .contributors {
+      img {
+        border-color: mat-color($background, background) !important;
+      }
+    }
   }
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -16,6 +16,13 @@
   "anms.about.get-notified.follow": "Follow",
   "anms.about.get-notified.description":
     "a Twitter bot that helps you to stay up to date with releases of popular frontend frameworks & libraries!",
+  "anms.about.contributors": "Contributors",
+  "anms.about.contributors.description1": "Want to start contributing to open source with Angular?",
+  "anms.about.contributors.description2": "Leave your mark and join the growing team of contributors!",
+  "anms.about.contributors.description3": "Get started by having a look on ",
+  "anms.about.contributors.description4": " and ",
+  "anms.about.contributors.issues": "open issues",
+  "anms.about.contributors.guide": "Contributor guide",
   "anms.features.title": "Features",
   "anms.features.documentation": "Docs",
   "anms.features.guide": "Guide",

diff --git a/src/assets/i18n/sk.json b/src/assets/i18n/sk.json
@@ -16,6 +16,13 @@
   "anms.about.get-notified.follow": "Sleduj",
   "anms.about.get-notified.description":
     ", Twitter bota ktorý ti pomôže zostať aktuálnym s vydaniami populárnych frontend frameworkov a knižníc!",
+  "anms.about.contributors": "Prispievatelia",
+  "anms.about.contributors.description1": "Chceš začať prispievať do open source s Angularom?",
+  "anms.about.contributors.description2": "Zanechaj svoju stopu a pridaj sa do rastúceho tímu prispievateľov!",
+  "anms.about.contributors.description3": "Začni tým že si pozrieš ",
+  "anms.about.contributors.description4": " a ",
+  "anms.about.contributors.issues": "list otvorených problémov ",
+  "anms.about.contributors.guide": "prispievateľskú príručku",
   "anms.features.title": "Vlastnosti",
   "anms.features.documentation": "Dok.",
   "anms.features.guide": "Návod",