Favicon generator: replace realfavicon with favicons package

2026-09-24 00:28:18 +00:00 · 2024-10-25 13:57:35 +02:00
parent f0d264961d
commit 71cf615b30
32 changed files with 1296 additions and 181 deletions
@@ -6,5 +6,4 @@ NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=UA-XXXXXX-X
 NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN=xxx
 NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
 NEXT_PUBLIC_AUTH0_CLIENT_ID=xxx
-FAVICON_GENERATOR_API_KEY=xxx
 NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
@@ -3,6 +3,7 @@ node_modules_linux

 playwright/envs.js
 deploy/tools/envs-validator/index.js
+deploy/tools/favicon-generator/index.js
 deploy/tools/feature-reporter/build/**
 deploy/tools/feature-reporter/index.js
 public/**
@@ -27,6 +27,12 @@ WORKDIR /envs-validator
 COPY ./deploy/tools/envs-validator/package.json ./deploy/tools/envs-validator/yarn.lock ./
 RUN yarn --frozen-lockfile

+### FAVICON GENERATOR
+# Install dependencies
+WORKDIR /favicon-generator
+COPY ./deploy/tools/favicon-generator/package.json ./deploy/tools/favicon-generator/yarn.lock ./
+RUN yarn --frozen-lockfile
+

 # *****************************
 # ****** STAGE 2: Build *******
@@ -77,6 +83,10 @@ COPY --from=deps /envs-validator/node_modules ./deploy/tools/envs-validator/node
 RUN cd ./deploy/tools/envs-validator && yarn build


+### FAVICON GENERATOR
+# Copy dependencies and source code
+COPY --from=deps /favicon-generator/node_modules ./deploy/tools/favicon-generator/node_modules
+
 # *****************************
 # ******* STAGE 3: Run ********
 # *****************************
@@ -102,6 +112,7 @@ COPY --from=builder /app/public ./public
 COPY --from=builder /app/package.json ./package.json
 COPY --from=builder /app/deploy/tools/envs-validator/index.js ./envs-validator.js
 COPY --from=builder /app/deploy/tools/feature-reporter/index.js ./feature-reporter.js
+# COPY /app/deploy/tools/favicon-generator/index.js ./favicon-generator.js

 # Copy scripts
 ## Entripoint
@@ -113,7 +124,7 @@ COPY --chmod=755 ./deploy/scripts/make_envs_script.sh .
 COPY --chmod=755 ./deploy/scripts/download_assets.sh .
 ## Favicon generator
 COPY --chmod=755 ./deploy/scripts/favicon_generator.sh .
-COPY ./deploy/tools/favicon-generator ./deploy/tools/favicon-generator
+COPY --from=builder /app/deploy/tools/favicon-generator ./deploy/tools/favicon-generator
 RUN ["chmod", "-R", "777", "./deploy/tools/favicon-generator"]
 RUN ["chmod", "-R", "777", "./public"]

@@ -26,8 +26,6 @@ NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xbf69c7abc4fee283b59a9633dadfdaedde5c5ee0fba3e
 NEXT_PUBLIC_HAS_BEACON_CHAIN=true
 NEXT_PUBLIC_HAS_USER_OPS=true
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
-NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(51, 53, 67, 1)
-NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=rgba(165, 252, 122, 1)
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_IS_TESTNET=true
 NEXT_PUBLIC_LOGOUT_URL=https://blockscout-goerli.us.auth0.com/v2/logout
@@ -61,5 +59,4 @@ NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-sepolia.safe.global
 NEXT_PUBLIC_SENTRY_ENABLE_TRACING=true
 NEXT_PUBLIC_STATS_API_HOST=https://stats-sepolia.k8s-dev.blockscout.com
 NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=noves
-NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
-NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
@@ -4,7 +4,7 @@ master_url="${FAVICON_MASTER_URL:-$NEXT_PUBLIC_NETWORK_ICON}"
 export MASTER_URL="$master_url"

 cd ./deploy/tools/favicon-generator
-./script.sh
+node "$(dirname "$0")/index.js"
 if [ $? -ne 0 ]; then
    cd ../../../
    exit 1
@@ -8,7 +8,6 @@ NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=UA-XXXXXX-X
 NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN=xxx
 NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
 NEXT_PUBLIC_AUTH0_CLIENT_ID=xxx
-FAVICON_GENERATOR_API_KEY=xxx
 NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
 NEXT_PUBLIC_AD_TEXT_PROVIDER=coinzilla
 NEXT_PUBLIC_AD_BANNER_PROVIDER=slise
@@ -1,4 +1,4 @@
-/output
-config.json
-response.json
-favicon_package**
+/node_modules
+/public
+.env
+/output
@@ -1,41 +0,0 @@
-{
-	"favicon_generation": {
-		"api_key": "<api_key>",
-		"master_picture": {
-			"type": "url",
-			"url": "<master_url>"
-		},
-		"files_location": {
-			"type": "path",
-			"path": "/favicons"
-		},
-		"favicon_design": {
-			"desktop_browser": {},
-			"ios": {
-				"picture_aspect": "no_change",
-				"assets": {
-					"ios6_and_prior_icons": false,
-					"ios7_and_later_icons": true,
-					"precomposed_icons": false,
-					"declare_only_default_icon": true
-				}
-			},
-			"safari_pinned_tab": {
-				"picture_aspect": "black_and_white",
-				"threshold": 60
-			}
-		},
-		"settings": {
-			"compression": "3",
-			"scaling_algorithm": "Mitchell",
-			"error_on_image_too_small": true,
-			"readme_file": false,
-			"html_code_file": false,
-			"use_path_as_is": false
-		},
-		"versioning": {
-			"param_name": "ver",
-			"param_value": "15Zd8"
-		}
-	}
-}
@@ -0,0 +1,69 @@
+/* eslint-disable no-console */
+const { favicons } = require('favicons');
+const fs = require('fs/promises');
+const path = require('path');
+
+generateFavicons();
+
+async function generateFavicons() {
+  console.log('Generating favicons...');
+  const masterUrl = process.env.MASTER_URL;
+  try {
+    if (!masterUrl) {
+      throw new Error('FAVICON_MASTER_URL or NEXT_PUBLIC_NETWORK_ICON must be set');
+    }
+
+    const fetch = await import('node-fetch');
+    const response = await fetch.default(masterUrl);
+    const buffer = await response.arrayBuffer();
+    const source = Buffer.from(buffer);
+
+    const configuration = {
+      path: '/output',
+      appName: 'Blockscout',
+      icons: {
+        android: true,
+        appleIcon: true,
+        appleStartup: false,
+        favicons: true,
+        windows: false,
+        yandex: false,
+      },
+    };
+
+    try {
+      const result = await favicons(source, configuration);
+
+      const outputDir = path.resolve(process.cwd(), 'output');
+      await fs.mkdir(outputDir, { recursive: true });
+
+      for (const image of result.images) {
+        // keep only necessary files
+        if (image.name === 'apple-touch-icon-180x180.png' || image.name === 'android-chrome-192x192.png' ||
+          (!image.name.startsWith('apple-touch-icon') && !image.name.startsWith('android-chrome'))
+        ) {
+          await fs.writeFile(path.join(outputDir, image.name), image.contents);
+        }
+
+        // copy android-chrome-192x192.png to logo-icon.png for marketing purposes
+        if (image.name === 'android-chrome-192x192.png') {
+          await fs.writeFile(path.join(outputDir, 'logo-icon.png'), image.contents);
+        }
+      }
+
+      for (const file of result.files) {
+        if (file.name !== 'manifest.webmanifest') {
+          await fs.writeFile(path.join(outputDir, file.name), file.contents);
+        }
+      }
+
+      console.log('Favicons generated successfully!');
+    } catch (faviconError) {
+      console.warn('Error generating favicons:', faviconError);
+      console.warn('Skipping favicon generation. Please check your sharp installation.');
+    }
+  } catch (error) {
+    console.error('Error in favicon generation process:', error);
+    process.exit(1);
+  }
+}
@@ -0,0 +1,20 @@
+{
+  "name": "favicon-generator",
+  "version": "1.0.0",
+  "main": "index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "favicons": "^7.2.0",
+    "ts-loader": "^9.4.4",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
+  },
+  "devDependencies": {
+    "dotenv-cli": "^7.4.2",
+    "node-loader": "^2.0.0",
+    "tsconfig-paths-webpack-plugin": "^4.1.0"
+  }
+}
@@ -1,113 +0,0 @@
-#!/bin/bash
-
-echo "🌀 Generating favicons bundle..."
-
-# Check if MASTER_URL is provided
-if [ -z "$MASTER_URL" ]; then
-  echo "🛑 Error: MASTER_URL variable is not provided."
-  exit 1
-fi
-
-# Check if FAVICON_GENERATOR_API_KEY is provided
-if [ -z "$FAVICON_GENERATOR_API_KEY" ]; then
-  echo "🛑 Error: FAVICON_GENERATOR_API_KEY variable is not provided."
-  exit 1
-fi
-
-# Mask the FAVICON_GENERATOR_API_KEY to display only the first 8 characters
-API_KEY_MASKED="${FAVICON_GENERATOR_API_KEY:0:8}***"
-echo "🆗 The following variables are provided:"
-echo "      MASTER_URL: $MASTER_URL"
-echo "      FAVICON_GENERATOR_API_KEY: $API_KEY_MASKED"
-echo
-
-# RealFaviconGenerator API endpoint URL
-API_URL="https://realfavicongenerator.net/api/favicon"
-
-# Target folder for the downloaded assets
-TARGET_FOLDER="./output"
-
-# Path to the config JSON template file
-CONFIG_TEMPLATE_FILE="config.template.json"
-
-# Path to the generated config JSON file
-CONFIG_FILE="config.json"
-
-# Escape special characters in MASTER_URL for sed
-ESCAPED_MASTER_URL=$(printf '%s\n' "$MASTER_URL" | sed -e 's/[\/&]/\\&/g')
-
-# Replace <api_key> and <master_url> placeholders in the JSON template file
-API_KEY_VALUE="$FAVICON_GENERATOR_API_KEY"
-sed -e "s|<api_key>|$API_KEY_VALUE|" -e "s|<master_url>|$ESCAPED_MASTER_URL|" "$CONFIG_TEMPLATE_FILE" > "$CONFIG_FILE"
-
-# Make the API POST request with JSON data from the config file
-echo "⏳ Making request to API..."
-API_RESPONSE=$(curl -s -X POST -H "Content-Type: application/json" -d @"$CONFIG_FILE" "$API_URL")
-
-# Create the response.json file with the API response
-echo "$API_RESPONSE" > response.json
-
-# Check if the API response is valid JSON and contains success status
-if ! jq -e '.favicon_generation_result.result.status == "success"' <<< "$API_RESPONSE" >/dev/null; then
-  echo "🛑 Error: API response does not contain the expected structure or has an error status."
-  ERROR_MESSAGE=$(echo "$API_RESPONSE" | jq -r '.favicon_generation_result.result.error_message' | tr -d '\\')
-  if [ -n "$ERROR_MESSAGE" ]; then
-    echo "🛑 $ERROR_MESSAGE"
-  fi
-  exit 1
-fi
-echo "🆗 API responded with success status."
-
-# Parse the JSON response to extract the file URL and remove backslashes
-FILE_URL=$(echo "$API_RESPONSE" | jq -r '.favicon_generation_result.favicon.package_url' | tr -d '\\')
-PREVIEW_URL=$(echo "$API_RESPONSE" | jq -r '.favicon_generation_result.preview_picture_url' | tr -d '\\')
-
-# Check if FILE_URL is empty
-if [ -z "$FILE_URL" ]; then
-  echo "🛑 File URL not found in JSON response."
-  exit 1
-fi
-
-echo "🆗 Found following file URL in the response: $FILE_URL"
-echo "🆗 Favicon preview URL: $PREVIEW_URL"
-echo
-
-# Generate a filename based on the URL
-FILE_NAME=$(basename "$FILE_URL")
-
-# Check if the target folder exists and clear its contents if it does
-if [ -d "$TARGET_FOLDER" ]; then
-  rm -r "$TARGET_FOLDER"
-fi
-mkdir -p "$TARGET_FOLDER"
-
-# Download the file
-echo "⏳ Trying to download the file..."
-curl -s -L "$FILE_URL" -o "$FILE_NAME"
-
-# Check if the download was successful
-if [ $? -eq 0 ]; then
-  echo "🆗 File downloaded successfully."
-  echo
-else
-  echo "🛑 Error: Failed to download the file."
-  exit 1
-fi
-
-# Unzip the downloaded file to the target folder
-echo "⏳ Unzipping the file..."
-unzip -q "$FILE_NAME" -d "$TARGET_FOLDER"
-
-# Check if the unzip operation was successful
-if [ $? -eq 0 ]; then
-  echo "🆗 File unzipped successfully."
-  echo
-else
-  echo "🛑 Failed to unzip the file."
-  exit 1
-fi
-
-# Clean up - remove the JSON response file and temporary JSON config file
-rm response.json "$CONFIG_FILE"
-
-echo "✅ Done."
@@ -79,5 +79,4 @@ frontend:
    NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
    NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY
    NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID
-    FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY
    NEXT_PUBLIC_OG_IMAGE_URL: https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/base-mainnet.png
@@ -85,6 +85,5 @@ frontend:
    NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
    NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY
    NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID
-    FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY
    NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY
    NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN
@@ -3,6 +3,7 @@
 | Variable | Type | Description | Compulsoriness | Default value | Example value | Introduced in version | Deprecated in version | Comment |
 | --- | --- | --- | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY | `string` | RealFaviconGenerator [API key](https://realfavicongenerator.net/api/) | Required | - | `<your-secret>` | v1.11.0 | v1.16.0 | Replaced FAVICON_GENERATOR_API_KEY |
+| FAVICON_GENERATOR_API_KEY | `string` | RealFaviconGenerator [API key](https://realfavicongenerator.net/api/) | Required | - | `<your-secret>` | v1.16.0+ | v1.37.0 | We don't use RealFaviconGenerator anymore |
 | NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK | `boolean` | Set to true for optimistic L2 solutions | Required | - | `true` | v1.17.0 | v1.24.0 | Replaced by NEXT_PUBLIC_ROLLUP_TYPE |
 | NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK | `boolean` | Set to true for zkevm L2 solutions  | Required | - | `true` | v1.17.0 | v1.24.0 | Replaced by NEXT_PUBLIC_ROLLUP_TYPE |
 | NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL | `string` | URL for optimistic L2 -> L1 withdrawals | Required | - | `https://app.optimism.io/bridge/withdraw` | v1.17.0 | v1.24.0 | Renamed to NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL |
@@ -184,11 +184,10 @@ The app version shown in the footer is derived from build-time ENV variables `NE

 ### Favicon

-By default, the app has generic favicon. You can override this behavior by providing the following variables. Hence, the favicon assets bundle will be generated at the container start time and will be used instead of default one.
+By default, the app has generic favicon. You can override this behavior by providing the following variable. Hence, the favicon assets bundle will be generated at the container start time and will be used instead of default one.

 | Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
 | --- | --- | --- | --- | --- | --- | --- |
-| FAVICON_GENERATOR_API_KEY | `string` | RealFaviconGenerator [API key](https://realfavicongenerator.net/api/) | Required | - | `<your-secret>` | v1.16.0+ |
 | FAVICON_MASTER_URL | `string` | - | - | `NEXT_PUBLIC_NETWORK_ICON` | `https://placekitten.com/180/180` | v1.11.0+ |

 &nbsp;
@@ -48,12 +48,12 @@ class MyDocument extends Document {
          <script src="/assets/envs.js"/>

          { /* FAVICON */ }
-          <link rel="icon" href="/assets/favicon/favicon.ico" sizes="48x48"/>
-          <link rel="icon" sizes="32x32" type="image/png" href="/assets/favicon/favicon-32x32.png"/>
-          <link rel="icon" sizes="16x16" type="image/png"href="/assets/favicon/favicon-16x16.png"/>
-          <link rel="apple-touch-icon" href="/assets/favicon/apple-touch-icon-180x180.png"/>
-          <link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg"/>
-
+          <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png"/>
+          <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png"/>
+          <link rel="icon" type="image/png" sizes="48x48" href="/assets/favicon/favicon-48x48.png"/>
+          <link rel="shortcut icon" href="/assets/favicon/favicon.ico"/>
+          <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon-180x180.png"/>
+          <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon/android-chrome-192x192.png"/>
          <link rel="preload" as="image" href={ svgSprite.href }/>
        </Head>
        <body>
@@ -1,3 +0,0 @@
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
-  <path d="M34.9 2.9c-2.9 2.9-2.9 3-2.9 15 0 6.8-.5 13.1-1.1 14.5-1.9 4-6.6 5.6-16.6 5.6C4.7 38 1.7 39.4.5 44.3.2 45.5.1 75.4.2 110.7l.3 64.2 2.3 2.3c2.1 2.1 3.3 2.3 14.6 2.6 14.8.4 17.9-.6 19.5-6.6.7-2.4 1.1-26.2 1.1-66.9V43.1l2.4-2.8c2.3-2.7 2.9-2.8 13.6-3.3 15-.7 15-.6 15-18.2v-13l-2.9-2.9C63.2 0 63.2 0 50.5 0S37.8 0 34.9 2.9zm76.9-1.4c-3.9 2.2-5.1 7.8-4.6 20.4.5 9.8.6 10.6 3.2 12.8 2.3 2 3.8 2.3 10.5 2.3 4.3 0 9.2.5 11 1.1 6.3 2.2 6.1.3 6.1 71.4v64.7l2.9 2.9c2.9 2.9 3 2.9 15.4 2.9 12 0 12.7-.1 15.6-2.6l3.1-2.6V42.9l-2.5-2.4c-2.2-2.2-3.2-2.5-10.5-2.5-8.1 0-14-1.6-15.6-4.1-.5-.8-1.1-7.6-1.4-15.1C144.3.3 144.6.6 127.2.2c-9.8-.1-13.3.1-15.4 1.3zM72.3 74.4l-2.8 2.4-.3 30.6-.3 30.5 3 3.3 2.9 3.3h13.1c12.9 0 13.1 0 15.8-2.8l2.8-2.7V76.8l-2.8-2.4C101 72.1 100.2 72 88 72s-13 .1-15.7 2.4z"/>
-</svg>
@@ -10,7 +10,7 @@ fi
 dotenv \
  -v MASTER_URL=$master_url \
  -e $secrets_file \
-  -- bash -c 'cd ./deploy/tools/favicon-generator && ./script.sh'
+  -- bash -c 'cd ./deploy/tools/favicon-generator && node "$(dirname "$0")/index.js"'

 if [ -d "$favicon_folder" ]; then
  rm -r "$favicon_folder"
@@ -17,5 +17,5 @@
    "baseUrl": ".",
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.node.ts", "**/*.tsx", "decs.d.ts", "global.d.ts"],
-  "exclude": ["node_modules", "node_modules_linux", "./deploy/tools/envs-validator"],
+  "exclude": ["node_modules", "node_modules_linux", "./deploy/tools/envs-validator", "./deploy/tools/favicon-generator"],
 }