css fixes + path fixes + repo link fix

.github/workflows/nextjs.yml

@@ -7,7 +7,7 @@ name: Deploy Next.js site to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: ['main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -21,7 +21,7 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 jobs:
@@ -51,7 +51,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "20"
+          node-version: '20'
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Setup Pages
         uses: actions/configure-pages@v3
@@ -71,6 +71,16 @@ jobs:
           # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: |
             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+
+      # Conditionally set NEXT_PUBLIC_BASE_PATH based on the repository
+      - name: Set base path for GitHub Pages
+        run: |
+          if [ "${{ github.repository }}" == "push-protocol/push-scan" ]; then
+            echo "NEXT_PUBLIC_BASE_PATH=/push-scan" >> $GITHUB_ENV
+          else
+            echo "NEXT_PUBLIC_BASE_PATH=" >> $GITHUB_ENV
+          fi
+
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Next.js

README.md

@@ -20,6 +20,7 @@ Push Analytics and Push Scan </h1>
 <p>Push Analytics Dashboard is a comprehensive tool designed to provide in-depth insights into the performance and usage of the Push Protocol. This repository hosts the code that powers the analytics component of the Push Protocol, offering a detailed view of various metrics such as the number of subscribers, notifications, channels, and more. The dashboard is an essential tool for understanding the reach and impact of the Push Protocol, providing valuable data that can help guide future development and improvements.
 
 The dashboard is designed with a user-friendly interface, making it easy to navigate and understand the data presented. It provides real-time updates, ensuring you have the most accurate and up-to-date information at your fingertips. Whether you're a developer looking to monitor the performance of your channels, or a user interested in understanding more about your subscriptions, the Push Analytics Dashboard is a powerful resource for all things related to the Push Protocol.</p>
+
 <h3> <a href="https://push.network/">Visit: Push.network 🕸️</a> </h3>
 <br />
 <p align="center">
@@ -40,37 +41,40 @@ The dashboard is designed with a user-friendly interface, making it easy to navi
 ---
 
 ## 📚 Table of Contents
+
 - [Screenshots](#screenshots)
 - [Getting Started](#getting-started)
 - [Contributing](#contributing)
 
 ---
 
-## Screenshots 
+## Screenshots
 
 <h3>June 2023</h3>
 
 ![image](https://github.com/firascodes/push-analytics-dashboard/assets/72166289/f1e7ae48-f400-41e4-b256-50a9c29a02ef)
 ![image](https://github.com/firascodes/push-analytics-dashboard/assets/72166289/e1e02a38-6c6a-43f9-ab9f-f7ac589cfe6e)
 
-
 ---
 
 ## Getting Started
 
 ### 🖥 Installation
 
 1. Clone the push-analytics-dashboard repository:
+
 ```sh
-git clone https://github.com/ethereum-push-notification-service/push-analytics-dashboard
+git clone https://github.com/push-protocol/push-analytics-dashboard
 ```
 
 2. Change to the project directory:
+
 ```sh
 cd push-analytics-dashboard
 ```
 
 3. Install the dependencies:
+
 ```sh
 npm install
 ```
@@ -82,25 +86,25 @@ npm run dev && node dist/main.js
 ```
 
 ### 🧪 Running Tests
+
 ```sh
 npm test
 ```
 
 ## Contributing
 
-Push Protocol is an open source Project. We firmly believe in a completely transparent development process and value any contributions. We would love to have you as a member of the community, whether you are assisting us in bug fixes, suggesting new features, enhancing our documentation, or simply spreading the word. 
+Push Protocol is an open source Project. We firmly believe in a completely transparent development process and value any contributions. We would love to have you as a member of the community, whether you are assisting us in bug fixes, suggesting new features, enhancing our documentation, or simply spreading the word.
 
 - Bug Report: Please create a bug report if you encounter any errors or problems while utilising the Push Protocol.
 - Feature Request: Please submit a feature request if you have an idea or discover a capability that would make development simpler and more reliable.
 - Documentation Request: If you're reading the Push documentation and believe that we're missing something, please create a docs request.
 
-
-Read how you can contribute <a href="https://github.com/ethereum-push-notification-service/push-analytics-dashboard/blob/main/contributing.md">HERE</a>
+Read how you can contribute <a href="https://github.com/push-protocol/push-analytics-dashboard/blob/main/contributing.md">HERE</a>
 
 Not sure where to start? Join our discord and we will help you get started!
 
-
 <a href="https://discord.gg/pushprotocol" title="Join Our Community"><img src="https://www.freepnglogos.com/uploads/discord-logo-png/playerunknown-battlegrounds-bgparty-15.png" width="200" alt="Discord" /></a>
 
 ## License
-Check out our License <a href='https://github.com/ethereum-push-notification-service/push-analytics-dashboard/blob/main/license-v1.md'>HERE </a>
+
+Check out our License <a href='https://github.com/push-protocol/push-analytics-dashboard/blob/main/license-v1.md'>HERE </a>

charts/DoughnutChart/index.tsx

@@ -124,8 +124,6 @@ const DoughnutChart = ({ data, title, label, value, colorSet }: any) => {
     >
       <Card
         sx={{
-          minHeight: '100%',
-          minWidth: '100%',
           backgroundColor: isMobile ? 'transparent' : theme.background.card,
           border: `1px solid ${theme.background.border}`,
           borderRadius: '28px',

components/Dashboard/Filters.tsx

@@ -326,6 +326,7 @@ const Searchbar = styled.input`
 
 const FirstFilterContainer = styled(ItemHV2)`
 justify-content:flex-start;
+margin-top:24px;
 @media(max-width:480px){
   width: 100%;
   justify-content: space-between;

components/Dashboard/LineChartSet/linchartset.styled.ts

@@ -82,11 +82,14 @@ export const TimeFilterContainer = styled.div`
   padding: 5px;
   align-items: center;
   justify-content: space-between;
+  margin-top: 24px;
   @media (max-width: 480px) {
     width: 100%;
+    margin-top: 0px;
   }
   @media (max-width: 768px) {
     width: 100%;
+    margin-top: 0px;
   }
 `;
 

components/Footer/index.tsx

@@ -43,7 +43,7 @@ export default function Footer() {
       width="calc(100% - (var(--spacing-sm) * 2))"
       css={css`
         flex: initial;
-       margin: 0 auto;
+        margin: 0 auto;
       `}
     >
       <Box display="flex" flexDirection="row" gap="spacing-sm">
@@ -55,7 +55,7 @@ export default function Footer() {
           <Twitter color="icon-primary" size={18} />
         </Link>
         <Link
-          href="https://github.com/ethereum-push-notification-service/"
+          href="https://github.com/push-protocol/"
           target={'_blank'}
           rel={'noreferrer'}
         >

contributing.md

@@ -1,40 +1,48 @@
 # Contributing
 
 ## Repo Setup
+
 ```
-git clone https://github.com/ethereum-push-notification-service/push-analytics-dashboard
+git clone https://github.com/push-protocol/push-analytics-dashboard
 
 cd push-analytics-dashboard
 ```
 
 ```
 yarn install
 ```
-***Note*** -
+
+**_Note_** -
 We are using `yarn` and **strongly** advise to use yarn 1.x to avoid any NPM issues.
 
 ## Running the Demo React App
+
 We have a `demoreact` playground to test the individual packages being built out. To run the `demoreact` app
+
 ### By GUI (preferred)
+
 1. click on the `NX console` extension icon in the VSCode sidebar.
 2. click on the `build` target execute icon under `demoreact`
 3. click on the `serve` target execute icon under `demoreact`
 4. wait for the localhost to be ready in the terminal & then hit `http://localhost:4200/` on your browser to run the app.
 
 ### By CLI
+
 1. run `yarn nx build demoreact`
 2. run `yarn nx run demoreact:build:production`
 
 ## Pull Requests process
+
 - All changes should be requested through PRs from a feature/bug branch to `main` branch.
-- We are using 
-   - [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/#summary): to follow [semver](https://semver.org/#summary) for npm package versioning
-   - [commitizen](https://github.com/commitizen/cz-cli) to restrict commits to follow conventional commits
-   - [husky](https://typicode.github.io/husky/#/) to run pre-commit checks
+- We are using
+  - [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/#summary): to follow [semver](https://semver.org/#summary) for npm package versioning
+  - [commitizen](https://github.com/commitizen/cz-cli) to restrict commits to follow conventional commits
+  - [husky](https://typicode.github.io/husky/#/) to run pre-commit checks
 
 So, use `yarn cz` to commit changes after `git add` (recommended) or hand crafted git commit messages to follow conventional commit. Otherwise the CLI will prevent you from committing code.
 
-- Before starting on any dev on the repo, 
+- Before starting on any dev on the repo,
+
 ```bash
 # pull latest from main
 git pull origin main
@@ -45,14 +53,16 @@ git checkout -b <your-branch-name>
 ```
 
 ### How to add commits which will decide versioning when deploying
+
 When you are ready to commit your changes.
 
 Run
+
 ```
 git add -A
 ```
 
-then 
+then
 
 ```
 yarn cz
@@ -65,41 +75,55 @@ this will pop up the below CLI
 Read through the [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) and [semver](https://semver.org/#summary) to get a better understanding for selecting which option.
 
 ### General guideline
-* for bug fixes use `fix`
-* for backward compatible new features use `feat`
 
-## NX 
+- for bug fixes use `fix`
+- for backward compatible new features use `feat`
+
+## NX
+
 We are using [NX](https://nx.dev/getting-started/intro) and some NX plugins for monorepo management, verison & publish.
 
 ### NX console
+
 The repo comes in with a baked in NX console and some other VSCode extensions to -
-* help simplify processes like build, lint, test, run demo apps
-* run scripts on affected parts of the codebase
 
-***Note*** -
+- help simplify processes like build, lint, test, run demo apps
+- run scripts on affected parts of the codebase
+
+**_Note_** -
 <span style="color:red">Don't run CI-prefixed targets in the NX console in local, they are only for CI.</span>.
 
-## Adding new packages 
+## Adding new packages
+
 The NX monorepo uses `project.json` & `package.json` to manage the monorepo workspace and also ultimately build out the bundle that will be published to NPM registry.
 
 ### - adding `dependencies` to a package
-at root, simply run 
+
+at root, simply run
+
 ```
 yarn add "[email protected]"
 ```
+
 And then simply import that dependency in your package. NX while running `build` for that package will take care of making it a `dependency` in the final bundle.
 
 ### - adding `devDependencies` to a package
-at root, simply run 
+
+at root, simply run
+
 ```
 yarn add -D "[email protected]"
 ```
+
 And then simply import that dependency in your package. NX while running `build` for that package will take care of making it a `devDependency` in the final bundle.
 
 ### - adding `peerDependencies` to a package
-at root, simply run 
+
+at root, simply run
+
 ```
 yarn add "[email protected]"
 ```
+
 And then simply import that dependency in your package. In the `package.json` of the package where you want to consume it, simply declare the dependency as `peerDependency`
 NX while running `build` for that package will take care of making it a `peerDependency` in the final bundle.

next.config.js

@@ -4,7 +4,11 @@ const nextConfig = {
   swcMinify: true,
   devIndicators: {
     buildActivity: false,
-  }
+  },
+  // Access the NEXT_PUBLIC_BASE_PATH environment variable
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '', // Default to empty if not defined
+  // You can also use assetPrefix to set the base path for static assets
+  assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH || '',
 };
 
 module.exports = nextConfig;

theme/globalStyles.ts

@@ -2,28 +2,30 @@
 import { createGlobalStyle } from 'styled-components';
 import { getBlocksCSSVariables } from '../blocks';
 
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
+
 export const GlobalStyles = createGlobalStyle`
   @font-face {
   font-family: 'FK Grotesk Neu';
-  src: url('../static/fonts/FKGroteskNeue-Regular.woff2') format('woff2'),
-    url('../static/fonts/FKGroteskNeue-Regular.woff') format('woff');
+  src: url('${basePath}/static/fonts/FKGroteskNeue-Regular.woff2') format('woff2'),
+    url('${basePath}/static/fonts/FKGroteskNeue-Regular.woff') format('woff');
   font-weight: 100 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'FK Grotesk Neu';
-  src: url('../static/fonts/FKGroteskNeue-Medium.woff2') format('woff2'),
-    url('../static/fonts/FKGroteskNeu-Medium.woff') format('woff');
+  src: url('${basePath}/static/fonts/FKGroteskNeue-Medium.woff2') format('woff2'),
+    url('${basePath}/static/fonts/FKGroteskNeu-Medium.woff') format('woff');
 
   font-weight: 500 600;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'FK Grotesk Neu';
-  src: url('../static/fonts/FKGroteskNeue-Bold.woff2') format('woff2'),
-    url('../static/fonts/FKGroteskNeue-Bold.woff') format('woff');
+  src: url('${basePath}/static/fonts/FKGroteskNeue-Bold.woff2') format('woff2'),
+    url('${basePath}/static/fonts/FKGroteskNeue-Bold.woff') format('woff');
   font-weight: 700 800;
   font-style: normal;
   font-display: swap;