v0.13.0

.env.example

@@ -1 +1,7 @@
-REACT_APP_API_URL=http://localhost:8000
+REACT_APP_API_URL=http://localhost:8000
+
+PUBLIC_URL=https://sdn-host.net/public/
+
+CDN_HOST=some-ftp-host.com
+CDN_LOGIN=gitcom
+CDN_PASSWORD=your-password

README.md

@@ -7,6 +7,8 @@
 
 This is the main frontend application hosted at [gitcom.org](https://gitcom.org)
 
+![](public/img/screenshots/screenshot.jpg?raw=true)
+
 ### Brief description
 This platform can help:
 1. users: it will provide an easy way for users to support independent developers via subscription or donations and get rewards in return

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitcom-front",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "private": true,
   "dependencies": {
     "@azure/ms-rest-js": "^2.0.5",
@@ -46,5 +46,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {}
 }

public/index.html

@@ -15,6 +15,7 @@
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <div id="fb-root"></div>
+<script src="https://gumroad.com/js/gumroad.js"></script>
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-153205738-3"></script>
 <script>
@@ -24,34 +25,5 @@
 
     gtag('config', 'UA-153205738-3');
 </script>
-
-<!-- Start of Async Drift Code -->
-<script>
-    "use strict";
-
-    !function () {
-        var t = window.driftt = window.drift = window.driftt || [];
-        if (!t.init) {
-            if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
-            t.invoked = !0, t.methods = ["identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on"],
-                t.factory = function (e) {
-                    return function () {
-                        var n = Array.prototype.slice.call(arguments);
-                        return n.unshift(e), t.push(n), t;
-                    };
-                }, t.methods.forEach(function (e) {
-                t[e] = t.factory(e);
-            }), t.load = function (t) {
-                var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
-                o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
-                var i = document.getElementsByTagName("script")[0];
-                i.parentNode.insertBefore(o, i);
-            };
-        }
-    }();
-    drift.SNIPPET_VERSION = '0.3.1';
-    drift.load('kmcg4ky4chmh');
-</script>
-<!-- End of Async Drift Code -->
 </body>
 </html>

public/js/lazy_init.js

@@ -0,0 +1,28 @@
+!function () {
+    var t = window.driftt = window.drift = window.driftt || [];
+    if (!t.init) {
+        if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
+        t.invoked = !0, t.methods = ["identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on"],
+            t.factory = function (e) {
+                return function () {
+                    var n = Array.prototype.slice.call(arguments);
+                    return n.unshift(e), t.push(n), t;
+                };
+            }, t.methods.forEach(function (e) {
+            t[e] = t.factory(e);
+        }), t.load = function (t) {
+            var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
+            o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
+            var i = document.getElementsByTagName("script")[0];
+            i.parentNode.insertBefore(o, i);
+        };
+    }
+}();
+drift.SNIPPET_VERSION = '0.3.1';
+drift.load('kmcg4ky4chmh');
+
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+
+gtag('config', 'UA-153205738-3');

public/sitemap.xml

@@ -7,14 +7,14 @@
 
     <url>
         <loc>https://gitcom.org/</loc>
-        <lastmod>2019-12-02T01:47:20+00:00</lastmod>
         <priority>1.00</priority>
     </url>
     <url>
-        <loc>https://gitcom.org/login</loc>
-        <lastmod>2019-12-02T01:47:20+00:00</lastmod>
-        <priority>0.80</priority>
+        <loc>https://gitcom.org/explore/projects</loc>
+        <priority>0.90</priority>
+    </url>
+    <url>
+        <loc>https://gitcom.org/explore/cards</loc>
+        <priority>0.90</priority>
     </url>
-
-
 </urlset>

scripts/deploy/prod/deploy.sh

@@ -1,3 +1,4 @@
 #!/bin/bash
-rm -rf /usr/local/gitcom/frontend/app/build/*
-cp -avr /usr/local/gitcom/frontend/app/tmp/build /usr/local/gitcom/frontend/app/
+python3 scripts/deploy/prod/stages/cdn_upload.py
+./scripts/deploy/prod/stages/copy_build.sh $1
+ssh $1 "bash -s" < ./scripts/deploy/prod/stages/deploy.sh

scripts/deploy/prod/stages/cdn_upload.py

@@ -0,0 +1,62 @@
+import os.path, os
+from ftplib import FTP, error_perm
+
+from dotenv import load_dotenv
+load_dotenv()
+
+load_dotenv(verbose=True)
+
+from pathlib import Path
+env_path = Path('.') / '.env'
+
+host = os.getenv("CDN_HOST")
+port = 21
+
+ftp = FTP()
+ftp.connect(host,port)
+ftp.login(os.getenv("CDN_LOGIN"), os.getenv("CDN_PASSWORD"))
+
+def count_files(path):
+    files_count = 0
+    for name in os.listdir(path):
+        localpath = os.path.join(path, name)
+        if os.path.isfile(localpath):
+            files_count += 1
+        elif os.path.isdir(localpath):
+            files_count += 1
+            files_count += count_files(localpath)
+    return files_count
+
+def upload_folder(ftp, path, prefix = None):
+    if prefix is not None:    
+        progress = 0
+        print("total files: " + str(count_files(path)) + " in " + path)
+        root_dir = "/gitcom/" + prefix
+        try:
+            ftp.mkd(root_dir)
+        except error_perm as e:
+            print(e)
+        ftp.cwd(root_dir)
+
+    for name in os.listdir(path):
+        localpath = os.path.join(path, name)
+        if os.path.isfile(localpath):
+            print("Storing ", name, localpath)
+            ftp.storbinary('STOR ' + name, open(localpath,'rb'))
+        elif os.path.isdir(localpath):
+            print("MKD", name)
+
+            try:
+                ftp.mkd(name)
+            except error_perm as e:
+                print(e)
+
+            print("CWD", name)
+            ftp.cwd(name)
+            upload_folder(ftp, localpath)
+            print("CWD", "..")
+            ftp.cwd("..")
+
+upload_folder(ftp, "build", "public/")
+
+ftp.quit()

scripts/deploy/prod/stages/copy_build.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+scp -r build "$1":/usr/local/gitcom/frontend/app/tmp

scripts/deploy/prod/stages/deploy.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+rm -rf /usr/local/gitcom/frontend/app/build/*
+cp -avr /usr/local/gitcom/frontend/app/tmp/build /usr/local/gitcom/frontend/app/

src/AppRoot.tsx

@@ -19,6 +19,19 @@ window.AppConfig = config;
 // @ts-ignore
 window.App = new App();
 
+async function loadScriptAsync(url: string) {
+    const script = document.createElement("script");
+    script.src = url;
+    script.async = true;
+    document.body.appendChild(script);
+}
+
+loadScriptAsync("https://momentjs.com/downloads/moment.min.js").then(() => {});
+
+setTimeout(() => {
+    loadScriptAsync("/js/lazy_init.js").then(() => {});
+}, 1000);
+
 function AppRoot() {
     return (
         <div className="app">

src/Routes.tsx

@@ -1,37 +1,42 @@
-import React from "react";
+import React, { Suspense, lazy } from "react";
 import { Route, Switch } from 'react-router-dom';
-import IndexLayout from "./layouts/index/IndexLayout";
-import LoginLayout from "./layouts/auth/login/LoginLayout";
-import HomeMainLayout from "./layouts/home/main/HomeMainLayout";
-import AccountLayout from "./layouts/account/account/AccountLayout";
-import BillingLayout from "./layouts/account/billing/BillingLayout";
-import SettingsLayout from "./layouts/account/settings/SettingsLayout";
-import HomeIntegrationsLayout from "./layouts/home/integrations/HomeIntegrationsLayout";
-import LoginWithGitLabLayout from "./layouts/auth/external/gitlab/logInWith/LoginWithGitLabLayout";
-import LoginWithGitHubLayout from "./layouts/auth/external/github/loginWith/LoginWithGitHubLayout";
-import ExternalRepoLayout from "./layouts/repos/external/default/ExternalRepoLayout";
-import ProjectImportLayout from "./layouts/import/project/ProjectImportLayout";
-import ProjectPage from "./layouts/entity/project/view/ProjectPage";
-import BoardPage from "./layouts/entity/board/page/BoardPage";
-import SubscriptionLayout from "./layouts/account/subscription/SubscriptionLayout";
-import LibraryLayout from "./layouts/account/library/LibraryLayout";
-import EditProjectLayout from "./layouts/entity/project/edit/EditProjectLayout";
-import ProjectPricingLayout from "./layouts/entity/project/pricing/view/ProjectPricingLayout";
-import RegisterLayout from "./layouts/auth/register/RegisterLayout";
-import ConfirmEmailLayout from "./layouts/auth/confirmEmail/ConfirmEmailLayout";
-import NotFoundLayout from "./layouts/404/NotFoundLayout";
-import HelpLayout from "./layouts/help/HelpLayout";
-import EditProjectPricingLayout from "./layouts/entity/project/pricing/edit/EditProjectPricingLayout";
-import WithdrawalsLayout from "./layouts/account/withdrawals/WithdrawalsLayout";
-import DeveloperQuickstartLayout from "./layouts/quickstart/developer/DeveloperQuickstartLayout";
+import { Icon } from 'antd';
+import ExploreCardsLayout from "./layouts/explore/cards/ExploreCardsLayout";
+const IndexLayout = lazy(() => import("./layouts/index/IndexLayout"));
+const LoginWithGitLabLayout = lazy(() => import("./layouts/auth/external/gitlab/logInWith/LoginWithGitLabLayout"));
+const LoginWithGitHubLayout = lazy(() => import("./layouts/auth/external/github/loginWith/LoginWithGitHubLayout"));
+const ExternalRepoLayout = lazy(() => import("./layouts/repos/external/default/ExternalRepoLayout"));
+const ProjectPage = lazy(() => import("./layouts/entity/project/view/ProjectPage"));
+const BoardPage = lazy(() => import("./layouts/entity/board/page/BoardPage"));
+const SubscriptionLayout = lazy(() => import("./layouts/account/subscription/SubscriptionLayout"));
+const LibraryLayout = lazy(() => import("./layouts/account/library/LibraryLayout"));
+const EditProjectLayout = lazy(() => import("./layouts/entity/project/edit/EditProjectLayout"));
+const ProjectPricingLayout = lazy(() => import("./layouts/entity/project/pricing/view/ProjectPricingLayout"));
+const RegisterLayout = lazy(() => import("./layouts/auth/register/RegisterLayout"));
+const ConfirmEmailLayout = lazy(() => import("./layouts/auth/confirmEmail/ConfirmEmailLayout"));
+const NotFoundLayout = lazy(() => import("./layouts/404/NotFoundLayout"));
+const HelpLayout = lazy(() => import("./layouts/help/HelpLayout"));
+const EditProjectPricingLayout = lazy(() => import("./layouts/entity/project/pricing/edit/EditProjectPricingLayout"));
+const WithdrawalsLayout = lazy(() => import("./layouts/account/withdrawals/WithdrawalsLayout"));
+const DeveloperQuickstartLayout = lazy(() => import("./layouts/quickstart/developer/DeveloperQuickstartLayout"));
+const ProjectCardsLayout = lazy(() => import("./layouts/entity/project/sub_pages/cards/ProjectCardsLayout"));
+const ExploreProjectsLayout = lazy(() => import("./layouts/explore/projects/ExploreProjectsLayout"));
+const LoginLayout = lazy(() => import("./layouts/auth/login/LoginLayout"));
+const HomeMainLayout = lazy(() => import("./layouts/home/main/HomeMainLayout"));
+const AccountLayout = lazy(() => import("./layouts/account/account/AccountLayout"));
+const BillingLayout = lazy(() => import("./layouts/account/billing/BillingLayout"));
+const SettingsLayout = lazy(() => import("./layouts/account/settings/SettingsLayout"));
+const HomeIntegrationsLayout = lazy(() => import("./layouts/home/integrations/HomeIntegrationsLayout"));
 
 class Routes extends React.Component {
     render() {
         return (
-            <div>
+            <Suspense
+                fallback={
+                    <Icon type="loading" style={{fontSize: "2em"}}/>
+                }>
                 <Switch>
                     <Route path="/" exact component={IndexLayout}/>
-
                     {/* Auth */}
                     <Route path="/login" exact component={LoginLayout}/>
                     <Route path="/register" exact component={RegisterLayout}/>
@@ -62,9 +67,10 @@ class Routes extends React.Component {
                     <Route path="/auth/external/github/login" exact component={LoginWithGitHubLayout}/>
                     <Route path="/auth/external/gitlab/login" exact component={LoginWithGitLabLayout}/>
 
-                    {/* External import routes */}
+                    {/* Explore */}
 
-                    <Route path="/user/repository/import" exact component={ProjectImportLayout}/>
+                    <Route path="/explore/projects" exact component={ExploreProjectsLayout}/>
+                    <Route path="/explore/cards" exact component={ExploreCardsLayout}/>
 
                     {/* Project */}
 
@@ -76,9 +82,11 @@ class Routes extends React.Component {
 
                     <Route path="/:owner/:alias/board/:boardGuid" exact component={BoardPage}/>
 
+                    <Route path="/:owner/:alias/cards" exact component={ProjectCardsLayout}/>
+
                     <Route component={NotFoundLayout}/>
                 </Switch>
-            </div>
+            </Suspense>
         );
     }
 }

src/app.css

@@ -143,6 +143,10 @@ p, b {
   color: white !important;
 }
 
+.ant-modal-body img {
+  max-width: 100%;
+}
+
 @media only screen and (min-width: 767px) {
   .desktop-zero-height {
     height: 0;

src/client/bindings.ts

@@ -8,6 +8,7 @@ export class ProjectModel {
     creator_guid?: string;
     base_uri?: string;
     stars_count?: number;
+    confirmed?: boolean;
     created_at?: string;
     updated_at?: string;
 }
@@ -174,3 +175,9 @@ export class ProjectPost {
     created_at?: string;
     updated_at?: string;
 }
+
+export class Image {
+    guid?: string;
+    url?: string;
+    created_at?: string;
+}