Skip to content
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

add multi language support #2427

Closed
wants to merge 1 commit into from
Closed

add multi language support #2427

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,8 @@
<div id="root"></div>
<script src="https://cdn.lordicon.com/lordicon.js"></script>
<script type="module" src="/src/main.jsx"></script>
<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","languages":["en","hi","mr","pa","ja","ru","ta"],"wrapper_selector":".gtranslate_wrapper","horizontal_position":"right","vertical_position":"bottom"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/flags.js" defer></script>
Comment on lines +15 to +17
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Consider adding CSS to handle widget positioning and responsiveness.

The widget's position is set through JavaScript, but you might want to add CSS to ensure proper display across different screen sizes and prevent overlap with other UI elements.

Add these styles to your CSS:

.gtranslate_wrapper {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 999;
  /* Add media queries for responsive positioning */
  @media (max-width: 768px) {
    bottom: 10px;
    right: 10px;
  }
}

💡 Codebase verification

Add defer to the lordicon script to improve page load performance

The gtranslate script is properly deferred, but there's another render-blocking script from lordicon.com that could impact page load performance. While the translation widget implementation follows performance best practices:

  • Uses defer attribute appropriately
  • Positioned at the bottom of the body
  • Settings are inlined to avoid additional network requests

The following script should be modified to include defer:

  • <script src="https://cdn.lordicon.com/lordicon.js"></script>
🔗 Analysis chain

Verify the impact on page load performance.

The addition of the translation widget might affect the page's load performance. Consider:

  1. Monitoring the impact on Core Web Vitals
  2. Testing the widget's behavior with slow connections
  3. Verifying that the defer attribute effectively prevents render-blocking
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if there are any other instances of script loading without defer/async
rg -n '<script(?!.*(?:defer|async|type="module")).*>' --type html

# Check for potential CSS/style related to gtranslate to ensure proper positioning
rg -n 'gtranslate' --type css

Length of output: 353

Script:

#!/bin/bash
# Check for script tags without defer/async using a simpler pattern
rg -n '<script.*src=' --type html

# Look for any style blocks or CSS files that might contain gtranslate styles
rg -n 'gtranslate' -g '*.{css,html}'

# Check for any performance-related meta tags or preload directives
rg -n '<(meta|link).*performance' --type html

# Look for other script tags to understand the overall script loading strategy
rg -n '<script' -A 2 --type html

Length of output: 1378

Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Add integrity and crossorigin attributes to the external script.

Loading external scripts without integrity checks poses a security risk. Consider adding integrity and crossorigin attributes to protect against compromised CDN scenarios.

-<script src="https://cdn.gtranslate.net/widgets/latest/flags.js" defer></script>
+<script src="https://cdn.gtranslate.net/widgets/latest/flags.js" 
+        integrity="sha384-HASH_VALUE_HERE" 
+        crossorigin="anonymous" 
+        defer></script>

Note: Replace sha384-HASH_VALUE_HERE with the actual hash of the script file. You can generate this using tools like https://www.srihash.org/

Committable suggestion was skipped due to low confidence.

</body>
</html>