Skip to content

Commit

Permalink
Merge branch 'main' into xmr/docs-bundler-images
Browse files Browse the repository at this point in the history
  • Loading branch information
XhmikosR committed Apr 1, 2024
2 parents 2695637 + 4093ed3 commit 87084de
Show file tree
Hide file tree
Showing 13 changed files with 198 additions and 151 deletions.
222 changes: 122 additions & 100 deletions package-lock.json

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions package.json
Expand Up @@ -104,16 +104,16 @@
},
"devDependencies": {
"@babel/cli": "^7.24.1",
"@babel/core": "^7.24.1",
"@babel/preset-env": "^7.24.1",
"@babel/core": "^7.24.3",
"@babel/preset-env": "^7.24.3",
"@docsearch/js": "^3.6.0",
"@popperjs/core": "^2.11.8",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-replace": "^5.0.5",
"@stackblitz/sdk": "^1.9.0",
"autoprefixer": "^10.4.18",
"autoprefixer": "^10.4.19",
"bundlewatch": "^0.3.3",
"clean-css-cli": "^5.6.3",
"clipboard": "^2.0.11",
Expand All @@ -127,7 +127,7 @@
"find-unused-sass-variables": "^5.0.0",
"globby": "^14.0.1",
"hammer-simulator": "0.0.1",
"hugo-bin": "^0.121.0",
"hugo-bin": "^0.121.1",
"ip": "^2.0.1",
"jasmine": "^5.1.0",
"jquery": "^3.7.1",
Expand All @@ -143,15 +143,15 @@
"lockfile-lint": "^4.13.2",
"nodemon": "^3.1.0",
"npm-run-all2": "^6.1.2",
"postcss": "^8.4.36",
"postcss": "^8.4.38",
"postcss-cli": "^11.0.0",
"rollup": "^4.13.0",
"rollup-plugin-istanbul": "^5.0.0",
"rtlcss": "^4.1.1",
"sass": "^1.72.0",
"sass-true": "^8.0.0",
"shelljs": "^0.8.5",
"stylelint": "^16.2.1",
"stylelint": "^16.3.0",
"stylelint-config-twbs-bootstrap": "^14.0.0",
"terser": "^5.29.2",
"vnu-jar": "23.4.11"
Expand Down
2 changes: 1 addition & 1 deletion site/assets/js/snippets.js
Expand Up @@ -5,7 +5,7 @@
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/

// Note that this file is not published; we only include it in scrpts.html
// Note that this file is not published; we only include it in scripts.html
// for StackBlitz to work

/* eslint-disable import/no-unresolved */
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/getting-started/parcel.md
Expand Up @@ -111,7 +111,7 @@ With dependencies installed and our project folder ready for us to start coding,
npm start
```

<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server.png" alt="Parcel dev server running">
![Parcel dev server running](/assets/img/guides/parcel-dev-server.png)

In the next and final section to this guide, we'll import all of Bootstrap's CSS and JavaScript.

Expand Down Expand Up @@ -150,7 +150,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`

3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:

<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server-bootstrap.png" alt="Parcel dev server running with Bootstrap">
![Parcel dev server running with Bootstrap](/assets/img/guides/parcel-dev-server-bootstrap.png)

Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.

Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/getting-started/vite.md
Expand Up @@ -135,7 +135,7 @@ With dependencies installed and our project folder ready for us to start coding,
npm start
```

<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server.png" alt="Vite dev server running">
![Vite dev server running](/assets/img/guides/vite-dev-server.png)

In the next and final section to this guide, we’ll import all of Bootstrap’s CSS and JavaScript.

Expand Down Expand Up @@ -175,7 +175,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s

3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:

<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap">
![Vite dev server running with Bootstrap](/assets/img/guides/vite-dev-server-bootstrap.png)

Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Vite example project](https://github.com/twbs/examples/tree/main/vite) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.

Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/getting-started/webpack.md
Expand Up @@ -141,7 +141,7 @@ With dependencies installed and our project folder ready for us to start coding,
npm start
```

<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server.png" alt="Webpack dev server running">
![Webpack dev server running](/assets/img/guides/webpack-dev-server.png)

In the next and final section to this guide, we'll set up the Webpack loaders and import all of Bootstrap's CSS and JavaScript.

Expand Down Expand Up @@ -244,7 +244,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first

4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:

<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server-bootstrap.png" alt="Webpack dev server running with Bootstrap">
![Webpack dev server running with Bootstrap](/assets/img/guides/webpack-dev-server-bootstrap.png)

Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.

Expand Down
8 changes: 8 additions & 0 deletions site/layouts/_default/_markup/render-image.html
@@ -0,0 +1,8 @@
{{- $originalSrc := .Destination | safeURL -}}
{{- $localImgPath := path.Join "/site/static/docs" site.Params.docs_version $originalSrc -}}
{{- /* This shouldn't be needed but we have a weird folder structure with version included... */ -}}
{{- $src := urls.JoinPath "/docs" site.Params.docs_version $originalSrc -}}
{{- $config := imageConfig $localImgPath -}}
{{- $classes := "d-block img-fluid" -}}

<img src="{{ $src }}" class="{{ $classes }}" alt="{{ .Text }}" width="{{ $config.Width }}" height="{{ $config.Height }}" loading="lazy">
26 changes: 3 additions & 23 deletions site/layouts/_default/single.html
Expand Up @@ -28,29 +28,9 @@ <h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>
<div class="container-xxl bd-gutter">
{{ .Content }}

{{ if eq .Title "Examples" }}
<hr class="my-5">
<div class="container">
<div class="text-center">
<div class="masthead-followup-icon d-inline-block mb-2 text-bg-danger">
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
<p class="col-md-10 col-lg-8 mx-auto lead">
Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
</p>
<a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
</div>
<img class="d-block img-fluid mt-3 mx-auto"
srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png,
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage@2x.png 2x"
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png"
alt="Bootstrap Themes"
width="1150"
height="320"
loading="lazy">
</div>
{{ end }}
{{ if eq .Title "Examples" -}}
{{ partial "examples/bs-themes" . }}
{{- end }}
</div>
</main>
{{ end }}
17 changes: 17 additions & 0 deletions site/layouts/partials/examples/bs-themes.html
@@ -0,0 +1,17 @@
<hr class="my-5">
<div class="container">
<div class="text-center">
<div class="masthead-followup-icon d-inline-block mb-2 text-bg-danger">
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
<p class="col-md-10 col-lg-8 mx-auto lead">
Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
</p>
<a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
</div>
{{ partial "responsive-img" (dict "context" .
"imgPath" "/assets/img/bootstrap-themes-collage.png"
"alt" "Bootstrap Themes"
"classes" "d-block mt-3") }}
</div>
8 changes: 4 additions & 4 deletions site/layouts/partials/home/icons.html
Expand Up @@ -15,9 +15,9 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;
</p>
</div>
<div class="col-lg-6">
<img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png,
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
alt="Bootstrap Icons" width="700" height="425" loading="lazy">
{{ partial "responsive-img" (dict "context" .
"imgPath" "/assets/img/bootstrap-icons.png"
"alt" "Bootstrap Icons"
"classes" "d-block mt-3") }}
</div>
</section>
12 changes: 5 additions & 7 deletions site/layouts/partials/home/masthead.html
Expand Up @@ -10,13 +10,11 @@
<svg class="bi" style="width: 20px; height: 20px;"><use xlink:href="#arrow-right-short"></use></svg>
</span>
</a>
<img class="d-none d-sm-block mx-auto mb-3"
srcset="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png,
/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow@2x.png 2x"
src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png"
alt="Bootstrap"
width="200"
height="165">
{{ partial "responsive-img" (dict "context" .
"imgPath" "/assets/brand/bootstrap-logo-shadow.png"
"alt" "Bootstrap"
"classes" "d-none d-sm-block mb-3"
"lazyload" false) }}
<h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
<p class="lead mb-4">
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
Expand Down
8 changes: 4 additions & 4 deletions site/layouts/partials/home/themes.html
Expand Up @@ -15,9 +15,9 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstr
</p>
</div>
<div class="col-lg-6">
<img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png,
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
alt="Bootstrap Themes" width="700" height="500" loading="lazy">
{{ partial "responsive-img" (dict "context" .
"imgPath" "/assets/img/bootstrap-themes.png"
"alt" "Bootstrap Themes"
"classes" "d-block mt-3") }}
</div>
</section>
22 changes: 22 additions & 0 deletions site/layouts/partials/responsive-img.html
@@ -0,0 +1,22 @@
{{- /*
Accepts context, classes, imgPath, alt and lazyload
*/ -}}

{{- $lazy := .lazyload | default true -}}
{{- $classes := slice "img-fluid" "mx-auto" | append (slice .classes) -}}

{{- $basePath := path.Join "/docs" .context.Site.Params.docs_version (path.Dir .imgPath) -}}
{{- $basename := path.BaseName .imgPath -}}
{{- $ext := path.Ext .imgPath -}}
{{- $imgPath := path.Join $basePath (printf "%s%s" $basename $ext) -}}
{{- $imgPath2x := path.Join $basePath (printf "%s@2x%s" $basename $ext) -}}

{{- with (imageConfig (path.Join "/site/static" $imgPath)) }}
<img class="{{ delimit $classes " " }}"
srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
src="{{ $imgPath }}"
alt="{{ $.alt }}"{{ if eq $lazy true }}
loading="lazy"{{ end }}
width="{{ .Width }}"
height="{{ .Height }}">
{{- end }}

0 comments on commit 87084de

Please sign in to comment.