Merge pull request #61 from useaurora/staging

Staging

.env.example

@@ -1,10 +1 @@
-# PostgreSQL Connection URL
-DB_URL=
-
-# PostgreSQL SSL Mode
-DB_SSL=false
-
-NEXT_PUBLIC_APP_IS_DEMO=false
-
-# JWT Secret for Cookie Generation
-JWT_SECRET=
+NEXT_PUBLIC_API_URL=

.github/workflows/docker-github-build.yml → .github/workflows/docker-build.yml

@@ -1,4 +1,4 @@
-name: Docker Github Image CI
+name: Docker Image CI
 
 on:
   release:
@@ -36,6 +36,7 @@ jobs:
           file: ./Dockerfile
           push: true
           tags: |
+            ghcr.io/${{ github.repository }}/${{ env.PROJECT_NAME }}:latest
             ghcr.io/${{ github.repository }}/${{ env.PROJECT_NAME }}:${{ env.PROJECT_VERSION }}
 
       - name: Image digest

Dockerfile

@@ -26,22 +26,12 @@ FROM node:14-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV production
-ENV AURORA_EMAIL [email protected]
-ENV AURORA_PASSWORD password
 
-# You only need to copy next.config.js if you are NOT using the default configuration
-COPY --from=builder /app/next.config.js ./
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/.next ./.next
 COPY --from=builder /app/node_modules ./node_modules
 COPY --from=builder /app/package.json ./package.json
 
-# Added for initialization
-COPY --from=builder /app/lib ./lib
-COPY --from=builder /app/migrations ./migrations
-COPY --from=builder /app/knexfile.js ./knexfile.js
-COPY --from=builder /app/utils/hash.js ./utils/hash.js
-
 RUN addgroup -g 1001 -S nodejs
 RUN adduser -S nextjs -u 1001
 RUN chown -R nextjs:nodejs /app/.next
@@ -50,9 +40,6 @@ USER nextjs
 
 EXPOSE 3000
 
-# Next.js collects completely anonymous telemetry data about general usage.
-# Learn more here: https://nextjs.org/telemetry
-# Uncomment the following line in case you want to disable telemetry.
 RUN npx next telemetry disable
 
-CMD npm run migrate && npm run aurora:initialize ${AURORA_EMAIL} ${AURORA_PASSWORD} password && npm run start
+CMD npm run start

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2012-2021 Scott Chacon and others
+Copyright (c) 2012-2021
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

components/Alert.js

@@ -2,25 +2,23 @@ import { XCircleIcon, ExclamationIcon } from "@heroicons/react/solid";
 import { Show } from "./Show";
 
 export const Alert = ({ style, title, messages }) => {
-  const styles = { danger: "red", alert: "yellow" };
-
   return (
-    <div className={`rounded-md bg-${styles[style]}-50 p-4`}>
+    <div className={`rounded-md bg-red-50 dark:bg-gray-900 p-4`}>
       <div className="flex">
         <div className="flex-shrink-0">
           <Show when={style === "danger"}>
-            <XCircleIcon className={`h-5 w-5 text-${styles[style]}-400`} aria-hidden="true" />
+            <XCircleIcon className={`h-5 w-5 text-red-400`} aria-hidden="true" />
           </Show>
 
           <Show when={style === "alert"}>
-            <ExclamationIcon className={`h-5 w-5 text-${styles[style]}-400`} aria-hidden="true" />
+            <ExclamationIcon className={`h-5 w-5 text-red-400`} aria-hidden="true" />
           </Show>
         </div>
         <div className="ml-3">
-          <h3 className={`text-sm font-medium text-${styles[style]}-800`}>{title}</h3>
+          <h3 className={`text-sm font-medium text-red-800 dark:text-red-400`}>{title}</h3>
 
           <Show when={messages.length > 0}>
-            <div className={`mt-2 text-sm text-${styles[style]}-700`}>
+            <div className={`mt-2 text-sm text-red-700 dark:text-red-400`}>
               <ul className="list-disc pl-5 space-y-1">
                 {messages.map((message, key) => (
                   <li key={key}>{message}</li>

components/Aurora.js

@@ -0,0 +1,10 @@
+export const Aurora = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.33 41.36" {...props}>
+      <path
+        d="M47.14 39.28L37.19 22l3-4.69a.18.18 0 01.24-.05L43.09 19a.34.34 0 00.53-.32l-.75-9.25a.36.36 0 00-.48-.3l-8.46 3.38a.35.35 0 00-.06.62l2.56 1.63a.17.17 0 010 .24l-1.73 2.73L24.87.7a1.39 1.39 0 00-2.41 0L.19 39.28a1.38 1.38 0 001.2 2.08L3 41.24a226.33 226.33 0 0141.24 0c.57.05 1.15.1 1.72.13a1.38 1.38 0 001.18-2.09zM6.75 36.73L23.45 7.8a.25.25 0 01.43 0L32 21.87l-2.47 3.77-4.89-7.37a.35.35 0 00-.58 0L12.34 36.68c-1.79.12-3.59.25-5.38.42a.25.25 0 01-.21-.37zm33.62.37a176.89 176.89 0 00-23.7-.65l7.41-10.7a.35.35 0 01.59 0l4.85 7.44a.36.36 0 00.59 0l4.42-6.93 6.06 10.49a.25.25 0 01-.22.35z"
+        fill="#555de4"
+      />
+    </svg>
+  );
+};

components/Button.js

@@ -1,11 +1,13 @@
 import { Loader } from "../components/Icons";
 
-export const Button = ({ type, value, isLoading, onClick }) => (
+export const Button = ({ type, block, value, isLoading, onClick }) => (
   <button
     type={type}
     disabled={isLoading}
     onClick={onClick}
-    className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+    className={`inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-black dark:text-white bg-gray-200 dark:bg-gray-800 dark:focus:outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 ring-offset-white dark:ring-offset-black focus:ring-gray-100 dark:focus:ring-gray-700 ${
+      block ? "w-full justify-center" : null
+    }`}
   >
     {isLoading && <Loader />}
     {value}
@@ -14,6 +16,7 @@ export const Button = ({ type, value, isLoading, onClick }) => (
 
 Button.defaultProps = {
   type: "button",
+  block: false,
   value: "",
   isLoading: false,
   onClick: () => {},

components/Container.js

@@ -0,0 +1,16 @@
+import Head from "next/head";
+import { Navbar } from "./Navbar";
+
+export const Container = ({ children, navbar = true }) => {
+  return (
+    <div className="bg-white dark:bg-black">
+      <Head>
+        <title>Aurora - Open Website Analytics</title>
+      </Head>
+
+      {navbar && <Navbar />}
+
+      <main className="flex flex-col justify-center px-8 bg-white dark:bg-black">{children}</main>
+    </div>
+  );
+};

components/Dashboard.js

@@ -0,0 +1,51 @@
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import { useWebsite } from "../hooks/useWebsite";
+import { TimeRanges } from "../utils/enums";
+import { dropProtocol } from "../utils/urls";
+import { Performance } from "./charts/Performance";
+import { RealtimeVisitors } from "./RealtimeVisitors";
+import { RangeSelector } from "./RangeSelector";
+import { Linear } from "./charts/Linear";
+
+const Area = dynamic(() => import("./charts/Area"), { ssr: false });
+
+export const Dashboard = ({ seed }) => {
+  const { website, isLoading, isError } = useWebsite({ seed });
+  const [timeRange, setTimeRange] = useState(TimeRanges.DAY);
+
+  return (
+    <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4 sm:p-8 mt-8 w-full space-y-10">
+      <div className="md:flex md:items-center md:justify-between">
+        <div className="flex-1 min-w-0">
+          <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate text-black dark:text-white">
+            {isLoading ? "_" : dropProtocol(website.url)}
+          </h2>
+
+          <div className="pt-2 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
+            <RealtimeVisitors seed={seed} />
+          </div>
+        </div>
+
+        <div className="mt-4 flex-shrink-0 flex md:mt-0 md:ml-4 space-x-3">
+          <RangeSelector onSelected={(value) => setTimeRange(value)} />
+        </div>
+      </div>
+
+      <Performance url={`/v2/metrics/${seed}/performance`} timeRange={timeRange} />
+
+      <Area url={`/v2/metrics/${seed}/views/series`} timeRange={timeRange} />
+
+      <div className="grid md:grid-cols-3 gap-4 gap-y-10 sm:divide-x divide-gray-200 dark:divide-gray-800">
+        <Linear title="Os" url={`/v2/metrics/${seed}/views/os`} timeRange={timeRange} />
+        <Linear title="Browser" url={`/v2/metrics/${seed}/views/browser`} timeRange={timeRange} />
+        <Linear title="Country" url={`/v2/metrics/${seed}/views/country`} timeRange={timeRange} />
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-4 pt-6 sm:pt-0 gap-y-10 sm:divide-x divide-gray-200 dark:divide-gray-800">
+        <Linear title="Page" url={`/v2/metrics/${seed}/views/page`} timeRange={timeRange} />
+        <Linear title="Referrer" url={`/v2/metrics/${seed}/views/referrer`} timeRange={timeRange} />
+      </div>
+    </div>
+  );
+};