Skip to content

feat:optimized (SEO) #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Shwetraj1 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat:optimized (SEO) #139

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e63e54c
feat:optimized (SEO)
Shwetraj1 Dec 13, 2025
dc11c01
feat: updated the canonical according to new description
Shwetraj1 Dec 13, 2025
a29852f
chore: solved critical fixes
Shwetraj1 Dec 13, 2025
e6f67c1
chore: considered CoderabbitAI reviews
Shwetraj1 Dec 13, 2025
71e32ca
chore: considered Coderabbit reviews again
Shwetraj1 Dec 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 51 additions & 48 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/%REACT_APP_LOGO_PATH%" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta property="og:title" content="Djed on %REACT_APP_BC%" />
<meta name="description" content="Djed is a formally verified crypto-backed autonomous stablecoin protocol. It has been researched since Q2 2020, its whitepaper has been released in August 2021, and it has multiple implementations and deployments. Here you can interact with a deployment that uses these smart contracts on %REACT_APP_BC%." />
<meta property="og:description" content="Djed is a formally verified crypto-backed autonomous stablecoin protocol. It has been researched since Q2 2020, its whitepaper has been released in August 2021, and it has multiple implementations and deployments. Here you can interact with a deployment that uses these smart contracts on %REACT_APP_BC%." />
<meta property="og:image" content="%PUBLIC_URL%/%REACT_APP_LOGO_PATH%" />
<meta property="og:url" content="%PUBLIC_URL%" />
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="%PUBLIC_URL%">
<meta name="twitter:title" content="Djed on Ethereum Classic">
<meta name="twitter:description" content="Djed is a formally verified crypto-backed autonomous stablecoin protocol. It has been researched since Q2 2020, its whitepaper has been released in August 2021, and it has multiple implementations and deployments. Here you can interact with a deployment that uses these smart contracts on Ethereum Classic.">
<meta name="twitter:image" content="%PUBLIC_URL%/%REACT_APP_LOGO_PATH%">
<!--link rel="apple-touch-icon" href="%PUBLIC_URL%/logo180.png" /-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;600&display=swap"
rel="stylesheet"
/>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title></title>
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="robots" content="index, follow" />

<!-- Canonical: deployment-scoped -->
<link rel="canonical" href="https://milkomeda-c1.djed.one/" />

<!-- Primary SEO -->
<title>Djed – Stablecoin Protocol (Milkomeda C1)</title>
<meta name="description"
content="Official Djed frontend for the Milkomeda C1 network. Djed is a formally verified, decentralized crypto-backed stablecoin protocol." />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Djed – Stablecoin Protocol (Milkomeda C1)" />
<meta property="og:description"
content="Official Djed frontend for the Milkomeda C1 network, enabling interaction with the Djed stablecoin protocol." />
<meta property="og:url" content="https://milkomeda-c1.djed.one/" />
<meta property="og:image" content="%PUBLIC_URL%/%REACT_APP_LOGO_PATH%" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://milkomeda-c1.djed.one/" />
<meta name="twitter:title" content="Djed – Stablecoin Protocol (Milkomeda C1)" />
<meta name="twitter:description" content="Official Djed frontend for the Milkomeda C1 network." />
<meta name="twitter:image" content="%PUBLIC_URL%/%REACT_APP_LOGO_PATH%" />

<!-- App identity -->
<link rel="icon" href="%PUBLIC_URL%/%REACT_APP_LOGO_PATH%" />

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;600&display=swap" rel="stylesheet" />

<!-- PWA -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
</head>
Comment on lines +4 to +49

@coderabbitai coderabbitai Bot Dec 13, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

# First, check the project structure and build configuration
ls -la | grep -E "(craco|webpack|package.json|tsconfig)"

Repository: DjedAlliance/Djed-Solidity-WebDashboard

Length of output: 213

🏁 Script executed:

# Check package.json for build scripts and dependencies
cat package.json | grep -A 20 '"scripts"' | head -30

Repository: DjedAlliance/Djed-Solidity-WebDashboard

Length of output: 877

🏁 Script executed:

# Look for craco configuration
if [ -f "craco.config.js" ]; then
  echo "=== craco.config.js found ==="
  cat craco.config.js
else
  echo "craco.config.js not found"
fi

Repository: DjedAlliance/Djed-Solidity-WebDashboard

Length of output: 1333

🏁 Script executed:

# Check if html-webpack-plugin is in dependencies
grep -i "html-webpack-plugin\|craco\|env-cmd" package.json

Repository: DjedAlliance/Djed-Solidity-WebDashboard

Length of output: 604

🏁 Script executed:

# Check for post-build scripts or any html processing
grep -r "post-build\|replace\|substitute" --include="*.json" --include="*.js" --include="*.sh" 2>/dev/null | head -20

Repository: DjedAlliance/Djed-Solidity-WebDashboard

Length of output: 10055

🏁 Script executed:

# Check the environment files to understand REACT_APP_DEPLOYMENT_URL structure
ls -la env/
cat env/*.env 2>/dev/null | head -50

Repository: DjedAlliance/Djed-Solidity-WebDashboard

Length of output: 2844

🏁 Script executed:

# Look for any deployment or build-related scripts in the repo
find . -maxdepth 2 -type f -name "*.sh" -o -name "*build*" -o -name "*deploy*" | grep -v node_modules | head -20

Repository: DjedAlliance/Djed-Solidity-WebDashboard

Length of output: 65

🏁 Script executed:

# Check if there's any custom processing in public/index.html or related files
find public/ -type f 2>/dev/null

Repository: DjedAlliance/Djed-Solidity-WebDashboard

Length of output: 524

🏁 Script executed:

# Examine if react-scripts or CRA handles custom env variables in index.html
# Check the actual content of index.html more carefully
cat -n public/index.html | head -50

Repository: DjedAlliance/Djed-Solidity-WebDashboard

Length of output: 2441

Fix custom environment variable replacement in index.html during build.

The %REACT_APP_DEPLOYMENT_URL% and %REACT_APP_LOGO_PATH% placeholders in public/index.html will not be replaced during the build process. Create React App natively only replaces %PUBLIC_URL% in static HTML files. The current setup using env-cmd loads environment variables into the Node process but does not configure the build system to interpolate custom variables into the HTML template.

Configure html-webpack-plugin in craco.config.js to enable template variable interpolation:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // ... existing config ...
      
      // Find and modify the HtmlWebpackPlugin instance
      const htmlWebpackPlugin = webpackConfig.plugins.find(
        (plugin) => plugin.constructor.name === 'HtmlWebpackPlugin'
      );
      
      if (htmlWebpackPlugin) {
        htmlWebpackPlugin.options.templateParameters = (compilation, assets, tags, options) => ({
          compilation,
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            tags,
            files: assets,
            options
          },
          PUBLIC_URL: process.env.PUBLIC_URL || '',
          REACT_APP_DEPLOYMENT_URL: process.env.REACT_APP_DEPLOYMENT_URL || '',
          REACT_APP_LOGO_PATH: process.env.REACT_APP_LOGO_PATH || ''
        });
      }
      
      return webpackConfig;
    }
  }
};

Then update public/index.html to use template syntax compatible with html-webpack-plugin (e.g., <%= htmlWebpackPlugin.options.REACT_APP_DEPLOYMENT_URL %>), or implement a post-build script to perform string replacement on the built index.html file using the environment variables.

🤖 Prompt for AI Agents 
In public/index.html around lines 4-45, the custom placeholders
%REACT_APP_DEPLOYMENT_URL% and %REACT_APP_LOGO_PATH% will not be interpolated by
CRA during build; configure html-webpack-plugin in craco.config.js to inject
templateParameters that expose REACT_APP_DEPLOYMENT_URL and REACT_APP_LOGO_PATH
(falling back to empty strings) and then update public/index.html to use
html-webpack-plugin template syntax (e.g. reference the injected values via
htmlWebpackPlugin.options.<VAR_NAME>), or alternatively add a post-build
replacement step to substitute those placeholders in the built index.html using
the environment variables.



<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

Expand All @@ -56,5 +58,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</body>

</html>
2 changes: 1 addition & 1 deletion src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const wscCustomTheme = {
};
export default function App() {
useEffect(() => {
document.title = `Djed on ${process.env.REACT_APP_BC}`;
document.title = `Djed on Milkomeda${process.env.REACT_APP_BC}`;
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated

const gradientTheme = process.env.REACT_APP_GRADIENT_THEME || "gradient-theme-5";
const colorTheme = process.env.REACT_APP_COLOR_THEME || "gold-dark";
Expand Down
2 changes: 1 addition & 1 deletion src/routes/protocol.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function Protocol() {
<div className="ProtocolSection">
<div className="Left">
<h1>
<strong>Djed on {process.env.REACT_APP_BC}</strong>
<strong>Djed on Milkomeda{process.env.REACT_APP_BC}</strong>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
</h1>
<div className="DescriptionContainer">
<p>
Expand Down