Skip to content

Fix HTML <head> content built from 'Download examples' button#41468

Merged
mdo merged 1 commit intomainfrom
main-jd-fix-zip-examples-html-files
May 19, 2025
Merged

Fix HTML <head> content built from 'Download examples' button#41468
mdo merged 1 commit intomainfrom
main-jd-fix-zip-examples-html-files

Conversation

@julien-deramond
Copy link
Copy Markdown
Member

@julien-deramond julien-deramond commented May 13, 2025 •
edited
Loading

Description

This PR fixes the issue mentioned at https://github.com/orgs/twbs/discussions/41437#discussioncomment-13066048.

When clicking on 'Download examples' in the documentation, HTML <head> content is broken; e.g. in bootstrap-5.3.6-examples/navbars/index.html:

<link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/navbars/">
<script src="../assets/js/color-modes.js"></script>
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
.bd-placeholder-img{font-size:1.125rem;text-anchor:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media
(min-width:
768px){.bd-placeholder-img-lg{font-size:3.5rem}}.b-example-divider{width:100%;height:3rem;background-color:#0000001a;border:solid
rgba(0,0,0,.15);border-width:1px 0;box-shadow:inset 0 .5em 1.5em #0000001a,inset 0 .125em .5em
#00000026}.b-example-vr{flex-shrink:0;width:1.5rem;height:100vh}.bi{vertical-align:-.125em;fill:currentColor}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller
.nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.btn-bd-primary{--bd-violet-bg:
#712cf9;--bd-violet-rgb: 112.520718, 44.062154, 249.437846;--bs-btn-font-weight: 600;--bs-btn-color:
var(--bs-white);--bs-btn-bg: var(--bd-violet-bg);--bs-btn-border-color: var(--bd-violet-bg);--bs-btn-hover-color:
var(--bs-white);--bs-btn-hover-bg: #6528e0;--bs-btn-hover-border-color: #6528e0;--bs-btn-focus-shadow-rgb:
var(--bd-violet-rgb);--bs-btn-active-color: var(--bs-btn-hover-color);--bs-btn-active-bg:
#5a23c8;--bs-btn-active-border-color: #5a23c8}.bd-mode-toggle{z-index:1500}.bd-mode-toggle
.bi{width:1em;height:1em}.bd-mode-toggle .dropdown-menu .active .bi{display:block!important}
</style>

How to test

npm run release-zip-examples
unzip bootstrap-5.3.6-examples.zip
cd bootstrap-5.3.6-examples
http-server

Go to http://127.0.0.1:8080/album, http://127.0.0.1:8080/badges, etc.

  • Check the rendering of all examples

Comparison with v5.2.3

In v5.2.3:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.104.2">
    <title>Album example · Bootstrap v5.2</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/album/">

    

    

<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {

In this branch:

<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Astro v5.7.12">
  <title>Album example · Bootstrap v5.3</title>
  <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/album/">
  <script src="../assets/js/color-modes.js"></script>
  <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
  <meta name="theme-color" content="#712cf9">
  <style>
    .bd-placeholder-img {
  • Get rid of the <link>s with the favicons
  • Get rid of the <meta name="theme-color"> one? Let's keep it as it doesn't cause any issues.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • (N/A) My change introduces changes to the documentation
  • (N/A) I have updated the documentation accordingly
  • (N/A) I have added tests to cover my changes
  • All new and existing tests passed

@github-project-automation github-project-automation Bot moved this to To do in v5.3.7 May 13, 2025
@julien-deramond julien-deramond marked this pull request as draft May 13, 2025 21:08
@julien-deramond julien-deramond moved this from To do to In progress in v5.3.7 May 13, 2025
@julien-deramond julien-deramond force-pushed the main-jd-fix-zip-examples-html-files branch from c542efb to 7b325e3 Compare May 13, 2025 21:30
@julien-deramond julien-deramond moved this from In progress to Needs review in v5.3.7 May 13, 2025
@julien-deramond julien-deramond requested a review from mdo May 13, 2025 21:30
@julien-deramond julien-deramond marked this pull request as ready for review May 13, 2025 21:30
@julien-deramond julien-deramond changed the title Fix HTML head content built from 'Download examples' button Fix HTML <head> content built from 'Download examples' button May 13, 2025
@mdo
Copy link
Copy Markdown
Member

mdo commented May 19, 2025

Tested, looks great!

@mdo mdo merged commit e5b9f37 into main May 19, 2025
14 checks passed
@mdo mdo deleted the main-jd-fix-zip-examples-html-files branch May 19, 2025 19:52
@github-project-automation github-project-automation Bot moved this from Needs review to Done in v5.3.7 May 19, 2025
Rajshree1126 pushed a commit to Rajshree1126/bootstrap that referenced this pull request May 20, 2025
@julien-deramond @Rajshree1126
Fix HTML head content built from 'Download examples' button (twbs#41468)
81442aa 
Consolidate multiple 'none' values in `box-shadow` Sass mixin (twbs#41469)

Test commit to enable PR creation
@julien-deramond julien-deramond mentioned this pull request Jun 13, 2025
Closed
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mdo mdo Awaiting requested review from mdo

Assignees

No one assigned

Labels

docs v5

Projects

No open projects
v5.3.7
Status: Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@julien-deramond @mdo