Skip to content

Add support for RTL styles by conditionally loading Bootstrap RTL CSS #26

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

Merged
MrHinsh merged 1 commit into from
Jan 20, 2026
Merged

Add support for RTL styles by conditionally loading Bootstrap RTL CSS #26

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
4 changes: 4 additions & 0 deletions module/layouts/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,11 @@
{{ if $langCss }}
<link rel="stylesheet" href="{{ $langCss.RelPermalink }}" />
{{- end }}
{{- if eq (.Site.Language.LanguageDirection | default "ltr") "rtl" }}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous" />
{{- else }}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous" />
{{- end }}
Comment on lines +106 to +110
Copy link

@coderabbitai coderabbitai bot Jan 20, 2026

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:

#!/bin/bash

echo "=== Checking Bootstrap 5.3.6 CDN availability ==="

# Check standard CSS
echo "Standard CSS response:"
curl -sI "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" | grep "^HTTP"

# Check RTL CSS
echo "RTL CSS response:"
curl -sI "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.rtl.min.css" | grep "^HTTP"

# Check JS bundle
echo "JS Bundle response:"
curl -sI "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" | grep "^HTTP"

echo ""
echo "=== Calculating actual SRI hashes ==="

echo "Standard CSS actual hash:"
curl -s "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" 2>/dev/null | openssl dgst -sha384 -binary | openssl base64 -A

echo ""
echo "Expected standard CSS hash: 4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT"

echo ""
echo "RTL CSS actual hash:"
curl -s "https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.rtl.min.css" 2>/dev/null | openssl dgst -sha384 -binary | openssl base64 -A

echo ""
echo "Expected RTL CSS hash: dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb"

Repository: nkdAgility/HugoGuides

Length of output: 151

🌐 Web query:

Bootstrap 5.3.6 CDN SRI hash sha384 integrity

💡 Result:

I can't find an official published sha384 integrity string for Bootstrap 5.3.6. Use one of these options:

  1. Compute the SRI yourself from the CDN file (recommended)
  1. Confirm official SRI from Bootstrap docs or the CDN before use (recommended to avoid mismatch). See Bootstrap CDN guidance and jsDelivr package listing. [1][2]

Sources:
[1] Bootstrap — Get started / CDN guidance. (getbootstrap.com)
[2] jsDelivr listing for bootstrap versions (includes 5.3.6). (cdn.jsdelivr.net)

If you want, I can fetch the file and compute the exact sha384 for you now.

Citations:

🌐 Web query:

Bootstrap 5.3.6 release jsdelivr official

💡 Result:

Yes — Bootstrap v5.3.6 was released on May 5, 2025, and is available via the official jsDelivr CDN.

  • Release announcement: Bootstrap blog (May 5, 2025). [1]
  • jsDelivr hosts the bootstrap package and lists v5.3.6. [2]

Example jsDelivr URLs (replace with other versions as needed):

Sources:
[1] Bootstrap blog — “Bootstrap 5.3.6” (May 5, 2025).
[2] jsDelivr / npm bootstrap package listing.

Recalculate and verify the SRI hashes before merging — they cannot be confirmed against official sources and will break the site if incorrect.

Bootstrap 5.3.6 exists on jsDelivr (released 5 May 2025), so the version is sound. The conditional logic is clean and consistent with line 2. However, the provided SHA384 integrity hashes have no official published reference. If these don't match the actual files on the CDN, the browser will reject the resources and the site will fail to load the stylesheets.

Recalculate the hashes yourself:

curl -sL https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css | openssl dgst -sha384 -binary | openssl base64 -A
curl -sL https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.rtl.min.css | openssl dgst -sha384 -binary | openssl base64 -A

Update the integrity attributes with the actual computed hashes, then verify the links work in a browser before this lands.

🤖 Prompt for AI Agents 
In `@module/layouts/baseof.html` around lines 106 - 110, The SRI hashes on the two
Bootstrap <link> tags inside the conditional block (the if eq
(.Site.Language.LanguageDirection | default "ltr") "rtl" ... else ... end) are
not verified; recalculate the SHA384 values for both bootstrap.min.css and
bootstrap.rtl.min.css (e.g., via curl | openssl dgst -sha384 -binary | openssl
base64 -A), and replace the current integrity attribute values on the
corresponding <link> elements with the computed hashes, then confirm the CDN
links load correctly in a browser.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
Comment on lines +106 to 111
Copy link

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

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

The Bootstrap CDN URL/version is now duplicated across the RTL and LTR branches, which increases the chance of future version drift (e.g., updating one link but not the other). Consider extracting the version/base URL into a template variable (and selecting only the RTL vs LTR filename/hash conditionally) so Bootstrap updates remain single-source.

Suggested change
{{- if eq (.Site.Language.LanguageDirection | default "ltr") "rtl" }}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous" />
{{- else }}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous" />
{{- end }}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
{{- $bootstrapVersion := "5.3.6" -}}
{{- $bootstrapBase := printf "https://cdn.jsdelivr.net/npm/bootstrap@%s/dist" $bootstrapVersion -}}
{{- if eq (.Site.Language.LanguageDirection | default "ltr") "rtl" }}
<link href="{{ $bootstrapBase }}/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous" />
{{- else }}
<link href="{{ $bootstrapBase }}/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous" />
{{- end }}
<script src="{{ $bootstrapBase }}/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>

Copilot uses AI. Check for mistakes.
<script src="https://kit.fontawesome.com/3e6b2f4808.js" crossorigin="anonymous"></script>

Expand Down