Initial stats feed, reformatted JSON file

src/data/stats.json

@@ -1,45 +0,0 @@
-{
-	"Number of repos above 0 stars and forks, owned by tea authenticated develoeprs": 2042,
-	"Number of maintainers for those 2042 packages": 932,
-	"List of repos with 500 stars OR forks, owned by tea authenticated developers": 
-	[
-		"prasmussen/gdrive",
-		"muesli/smartcrop",
-		"davdroman/DRCellSlideGestureRecognizer",
-		"piemonte/PBJVision",
-		"davdroman/Popsicle",
-		"MisterTea/EternalTerminal",
-		"stalniy/casl",
-		"cardillo/joinery",
-		"prasmussen/chrome-cli",
-		"BlankerL/DXY-COVID-19-Crawler",
-		"anapsix/docker-alpine-java",
-		"alexzaitsev/apk-dependency-graph",
-		"BlankerL/DXY-COVID-19-Data",
-		"silvestreh/onScreen",
-		"guo-yu/candy",
-		"dabit3/polygon-ethereum-nextjs-marketplace",
-		"SudhanPlayz/Discord-MusicBot",
-		"guo-yu/douban.fm",
-		"PaulLeCam/react-leaflet",
-		"piemonte/PBJVideoPlayer",
-		"timqian/chart.xkcd",
-		"lgaches/BeaconEmitter",
-		"aforarup/interview",
-		"piemonte/Player",
-		"cloudhead/http-console",
-		"muesli/beehive",
-		"romaHerman/timeLineiOS",
-		"piemonte/Twinkle",
-		"hellozimi/HCYoutubeParser",
-		"timqian/chinese-independent-blogs",
-		"hassankhan/config",
-		"jdorfman/awesome-json-datasets",
-		"davdroman/Bohr",
-		"Shabinder/SpotiFlyer",
-		"daCapricorn/ArcMenu",
-		"joeblau/COSTouchVisualizer",
-		"sj26/mailcatcher",
-		"Jolg42/awesome-typography"
-	]
-}

src/layouts/index.html

@@ -234,22 +234,25 @@
     <div class="row">
       <div class="col">
         <div class="metric-block" style="float:right; margin-top:-300px;">
-          <p class="stat-head">PACKAGES AVAILABLE</p>
+          <p class="stat-head">NUMBER OF REPOS</p>
-          <p class="stat-number teal">5,103,789</p>
+          <p class="stat-number teal" id="stat-one"></p>
+          <p class="small gray stat-small-text">Number of repos above 0 stars and forks, owned by tea authenticated develoeprs</p>
         </div>
         <div class="gen-art-mobile" id="m-gen-art-3"></div>
         <div class="gen-art-mobile" id="m-gen-art-4"></div>
         <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
         <div class="metric-block mb-5 mt-4">
           <p class="stat-head">AUTHENTICATED DEVS</p>
-          <p class="stat-number teal"><span id="count2">500,000</span></p>
+          <p class="stat-number teal"><span id="count2"></span></p>
+          <p class="small gray stat-small-text">This is the number of OSS developers who have chosen to join the battle for the future of the internet.</p>
         </div>
         <div class="gen-art-mobile" id="m-gen-art-5"></div>
         <div class="gen-art-mobile" id="m-gen-art-6"></div>
         <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
         <div class="metric-block" style="float:right;">
           <p class="stat-head">OS CONTRIBUTIONS</p>
-          <p class="stat-number teal">500,000</p>
+          <p class="stat-number teal" id="stat-two"></p>
+          <p class="small gray stat-small-text">Number of maintainers for those 2042 packages</p>
         </div>
         <div class="gen-art-mobile" id="m-gen-art-7"></div>
         <div class="gen-art-mobile" id="m-gen-art-8"></div>

src/layouts/partials/footer.html

@@ -203,3 +203,17 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
     }
 
   </script>
+
+  <script>
+
+    fetch('stats.json')
+    .then(res => res.json())
+    .then((out) => {
+      //Debugging + Reference
+      console.log(out);
+      document.getElementById('stat-one').innerHTML = out[0].num_repos;
+      document.getElementById('stat-two').innerHTML = out[0].num_maintainers;
+    })
+    .catch(err => { throw err });
+
+  </script>

src/static/css/homepage.css

@@ -196,7 +196,7 @@ mark{
   .metric-block{
     padding: 4.185vw;
     border: 2px solid #949494;
-    max-width: 41.741vw;
+    max-width: 33.3vw;
     background-color: #1a1a1a;
     position: relative;
     z-index:2;
@@ -239,7 +239,7 @@ mark{
   .metric-block{
     padding: 4.185vw;
     border: 2px solid #949494;
-    max-width: 41.741vw;
+    max-width: 30vw;
     background-color: #1a1a1a;
     position: relative;
     z-index:2;
@@ -392,6 +392,10 @@ mark{
     padding: 4vw !important;
   }
 
+  .stat-small-text{
+    text-align: center;
+  }
+
   .metric-block{
     padding: 4.185vw;
     border: 2px solid #949494;

src/static/stats.json

@@ -0,0 +1,46 @@
+[
+    {
+        "num_repos": 2042,
+        "num_maintainers": 932,
+				"list_repos": [
+					"prasmussen/gdrive",
+					"muesli/smartcrop",
+					"davdroman/DRCellSlideGestureRecognizer",
+					"piemonte/PBJVision",
+					"davdroman/Popsicle",
+					"MisterTea/EternalTerminal",
+					"stalniy/casl",
+					"cardillo/joinery",
+					"prasmussen/chrome-cli",
+					"BlankerL/DXY-COVID-19-Crawler",
+					"anapsix/docker-alpine-java",
+					"alexzaitsev/apk-dependency-graph",
+					"BlankerL/DXY-COVID-19-Data",
+					"silvestreh/onScreen",
+					"guo-yu/candy",
+					"dabit3/polygon-ethereum-nextjs-marketplace",
+					"SudhanPlayz/Discord-MusicBot",
+					"guo-yu/douban.fm",
+					"PaulLeCam/react-leaflet",
+					"piemonte/PBJVideoPlayer",
+					"timqian/chart.xkcd",
+					"lgaches/BeaconEmitter",
+					"aforarup/interview",
+					"piemonte/Player",
+					"cloudhead/http-console",
+					"muesli/beehive",
+					"romaHerman/timeLineiOS",
+					"piemonte/Twinkle",
+					"hellozimi/HCYoutubeParser",
+					"timqian/chinese-independent-blogs",
+					"hassankhan/config",
+					"jdorfman/awesome-json-datasets",
+					"davdroman/Bohr",
+					"Shabinder/SpotiFlyer",
+					"daCapricorn/ArcMenu",
+					"joeblau/COSTouchVisualizer",
+					"sj26/mailcatcher",
+					"Jolg42/awesome-typography"
+				]
+    }
+]