Add stats to homepage (#521)

* add stats to homepage

* move stats to side

backend/coreapp/urls.py

@@ -1,9 +1,10 @@
 from django.urls import path
 
-from coreapp.views import compilers, project, scratch, user
+from coreapp.views import compilers, stats, project, scratch, user
 
 urlpatterns = [
     path("compilers", compilers.CompilersDetail.as_view(), name="compilers"),
+    path("stats", stats.StatsDetail.as_view(), name="stats"),
     *scratch.router.urls,
     *project.router.urls,
     path("user", user.CurrentUser.as_view(), name="current-user"),

backend/coreapp/views/stats.py

@@ -0,0 +1,19 @@
+from rest_framework.request import Request
+from rest_framework.response import Response
+from rest_framework.views import APIView
+
+from ..models.scratch import Asm, Scratch
+from ..models.github import GitHubUser
+from ..models.profile import Profile
+
+
+class StatsDetail(APIView):
+    def get(self, request: Request) -> Response:
+        return Response(
+            {
+                "asm_count": Asm.objects.count(),
+                "scratch_count": Scratch.objects.count(),
+                "github_user_count": GitHubUser.objects.count(),
+                "profile_count": Profile.objects.count(),
+            }
+        )

frontend/src/lib/api.ts

@@ -623,3 +623,22 @@ export function usePaginated<T>(url: string): {
         loadPrevious,
     }
 }
+
+export interface Stats {
+    asm_count: number
+    scratch_count: number
+    github_user_count: number
+    profile_count: number
+}
+
+export function useStats(): Stats | undefined {
+    const { data, error } = useSWR<Stats>("/stats", get, {
+        refreshInterval: 5000,
+    })
+
+    if (error) {
+        throw error
+    }
+
+    return data
+}

frontend/src/pages/index.module.scss

@@ -158,3 +158,18 @@
         color: var(--link);
     }
 }
+
+.aboutColumnsContainer {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 1em;
+
+    @media (max-width: 600px) {
+        display: block;
+
+        > p {
+            display: none;
+        }
+    }
+
+}

frontend/src/pages/index.tsx

@@ -42,6 +42,7 @@ function ProjectList() {
 
 export default function IndexPage() {
     const user = api.useThisUser()
+    const stats = api.useStats()
     const plausible = usePlausible()
 
     const yourScratchesUrl = (!user || api.isAnonUser(user))
@@ -59,19 +60,29 @@ export default function IndexPage() {
                     <h1>
                         Welcome to <span className={styles.siteName}>decomp.me</span>
                     </h1>
-                    <p>
-                        {DECOMP_ME_DESCRIPTION}
-                    </p>
-                    <div className={styles.cta}>
-                        {user?.is_anonymous && <GitHubLoginButton popup />}
-                        <Link href="/new">
-                            <a>
-                                <Button primary onClick={() => plausible("indexCtaPress")}>
+                    <div className={styles.aboutColumnsContainer}>
+                        <div>
+                            <p>
+                                {DECOMP_ME_DESCRIPTION}
+                            </p>
+                            <div className={styles.cta}>
+                                {user?.is_anonymous && <GitHubLoginButton popup />}
+                                <Link href="/new">
+                                    <a>
+                                        <Button primary onClick={() => plausible("indexCtaPress")}>
                                     Start decomping
-                                    <ArrowRightIcon />
-                                </Button>
-                            </a>
-                        </Link>
+                                            <ArrowRightIcon />
+                                        </Button>
+                                    </a>
+                                </Link>
+                            </div>
+                        </div>
+                        {stats && <p>
+                            {stats.scratch_count.toLocaleString()} scratches created<br />
+                            {stats.profile_count.toLocaleString()} unique visitors<br />
+                            {stats.github_user_count.toLocaleString()} users signed up<br />
+                            {stats.asm_count.toLocaleString()} asm globs submitted
+                        </p>}
                     </div>
                 </ErrorBoundary>
             </header>