From 471f134ccfed6807ade50a0dd998bce75ef92f3f Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Mon, 11 Nov 2024 18:00:58 +0530 Subject: [PATCH] css fixes + path fixes + repo link fix --- .github/workflows/nextjs.yml | 16 ++++- README.md | 20 ++++--- charts/DoughnutChart/index.tsx | 2 - components/Dashboard/Filters.tsx | 1 + .../LineChartSet/linchartset.styled.ts | 3 + components/Footer/index.tsx | 4 +- contributing.md | 60 +++++++++++++------ next.config.js | 6 +- theme/globalStyles.ts | 14 +++-- 9 files changed, 86 insertions(+), 40 deletions(-) diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml index 5a0011a..2406cf0 100644 --- a/.github/workflows/nextjs.yml +++ b/.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 diff --git a/README.md b/README.md index 83e23b0..966478e 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,7 @@ Push Analytics and Push Scan

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.

+

Visit: Push.network πŸ•ΈοΈ


@@ -40,20 +41,20 @@ 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

June 2023

![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 @@ -61,16 +62,19 @@ The dashboard is designed with a user-friendly interface, making it easy to navi ### πŸ–₯ 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 HERE +Read how you can contribute HERE Not sure where to start? Join our discord and we will help you get started! - Discord ## License -Check out our License HERE + +Check out our License HERE diff --git a/charts/DoughnutChart/index.tsx b/charts/DoughnutChart/index.tsx index 44bb97d..0ee72ab 100644 --- a/charts/DoughnutChart/index.tsx +++ b/charts/DoughnutChart/index.tsx @@ -124,8 +124,6 @@ const DoughnutChart = ({ data, title, label, value, colorSet }: any) => { > @@ -55,7 +55,7 @@ export default function Footer() { diff --git a/contributing.md b/contributing.md index 35e20f2..56a8cda 100644 --- a/contributing.md +++ b/contributing.md @@ -1,8 +1,9 @@ # 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 ``` @@ -10,31 +11,38 @@ 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 ``` ### 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_** - Don't run CI-prefixed targets in the NX console in local, they are only for CI.. -## 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 "dependency_package_name@x.y.z" ``` + 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 "dependency_package_name@x.y.z" ``` + 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 "dependency_package_name@x.y.z" ``` + 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. diff --git a/next.config.js b/next.config.js index ebbb189..b455ec6 100644 --- a/next.config.js +++ b/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; diff --git a/theme/globalStyles.ts b/theme/globalStyles.ts index f6b17ae..5f443b8 100644 --- a/theme/globalStyles.ts +++ b/theme/globalStyles.ts @@ -2,19 +2,21 @@ 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; @@ -22,8 +24,8 @@ export const GlobalStyles = createGlobalStyle` @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;