Chore merge main from 2ba7dae to fb4629f

site/content/docs/5.3/examples/_index.md

@@ -6,88 +6,3 @@ aliases:
   - "/examples/"
   - "/docs/examples/"
 ---
-
-{{< callout info >}}
-**Some examples are missing here.**
-
-They are tracked in [#410](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/410) and will be shipped as soon as possible.
-
-One of the missing examples has priority? Feel free to contact a member of the [Core team]({{< docsref "/about/team" >}}) or add a comment directly [in the corresponding issue](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/410) to let us know.
-{{</ callout >}}
-
-{{< list-examples.inline >}}
-{{ range $entry := $.Site.Data.examples -}}
-<div class="bd-content mt-5">
-  <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
-  <p>{{ $entry.description }}</p>
-  {{ if eq $entry.category "RTL" -}}
-    <div class="bd-callout bd-callout-warning small">
-      <p>
-        <strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
-      </p>
-      <p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p>
-    </div>
-  {{ end -}}
-  {{ if eq $entry.category "Starters" -}}
-    <div class="bd-callout bd-callout-warning mb-4">
-      <p>
-        <strong>To get working Boosted examples based on the Bootstrap ones</strong>, you need to replace all <code>bootstrap</code> occurrences with <code>boosted</code> in some files.
-      </p>
-      <p>
-        You may need to tweak a bit Sass files and add a <code>src/fonts</code> directory to import font family properly in your project.
-        "Import Boosted" sections in our <a href="/docs/{{ $.Site.Params.docs_version }}/getting-started/parcel">Parcel</a>, <a href="/docs/{{ $.Site.Params.docs_version }}/getting-started/vite">Vite</a> or <a href="/docs/{{ $.Site.Params.docs_version }}/getting-started/webpack">Webpack</a> guides could help you.
-      </p>
-    </div>
-  {{ end -}}
-  {{ range $i, $example := $entry.examples -}}
-    {{- $len := len $entry.examples -}}
-    {{ if (eq $i 0) }}<div class="row">{{ end }}
-      {{ if $entry.external -}}
-        <div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
-          <svg class="bi fs-5 flex-shrink-0"><use xlink:href="#box-seam"></use></svg>
-          <div>
-            <h3 class="h5 mb-1">
-              <a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.bootstrap_github_org $example.url }}" target="_blank" rel="noopener">
-                {{ $example.name }}
-              </a>
-            </h3>
-            <p class="text-body-secondary">{{ $example.description }}</p>
-            <p>
-              {{- $indexPath := "index.html" -}}
-              {{- if $example.indexPath -}}
-                {{- $indexPath = $example.indexPath -}}
-              {{- end }}
-              <a class="icon-link link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file={{ $indexPath | urlquery }}" target="_blank" rel="noopener">
-                <svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
-                Edit in StackBlitz
-              </a>
-            </p>
-          </div>
-        </div>
-      {{ else -}}
-        <div class="col-sm-6 col-md-3 mb-3">
-          <a class="d-block link-offset-1" href="{{ urls.JoinPath "/docs" $.Site.Params.docs_version "/examples" ($example.name | urlize) "/"}}"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
-            {{ $imageBasePath := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/img/examples" -}}
-            {{- $imgPath := urls.JoinPath $imageBasePath (printf "%s%s" ($example.name | urlize) ".png") -}}
-            {{- $imgPath2x := urls.JoinPath $imageBasePath (printf "%s%s" ($example.name | urlize) "@2x.png") -}}
-            {{- with (imageConfig (path.Join "/site/static" $imgPath)) -}}
-            <img class="img-thumbnail mb-3"
-                 srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
-                 src="{{ $imgPath }}"
-                 alt=""
-                 width="{{ .Width }}"
-                 height="{{ .Height }}"
-                 loading="lazy">
-            {{- end }}
-            <h3 class="h5 mb-1">
-              {{ $example.name }}
-            </h3>
-          </a>
-          <p class="text-body-secondary">{{ $example.description }}</p>
-        </div>
-      {{- end }}
-    {{ if (eq (add $i 1) $len) }}</div>{{ end -}}
-  {{ end -}}
-</div>
-{{ end -}}
-{{< /list-examples.inline >}}

site/content/docs/5.3/getting-started/parcel.md

@@ -121,7 +121,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 Boosted's CSS and JavaScript.
 
@@ -169,7 +169,7 @@ Importing Boosted into Parcel requires three imports, two into our `styles.scss`
 
 4. **And you're done! 🎉** With Boosted'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-boosted.png" alt="Parcel dev server running with Boosted">
+   ![Parcel dev server running with Boosted](/assets/img/guides/parcel-dev-server-boosted.png)
 
    Now you can start adding any Boosted 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 Boosted's CSS and JS that you need.
 

site/content/docs/5.3/getting-started/vite.md

@@ -142,7 +142,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 Boosted’s CSS and JavaScript.
 
@@ -191,7 +191,7 @@ In the next and final section to this guide, we’ll import all of Boosted’s C
 
 4. **And you're done! 🎉** With Boosted'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-boosted.png" alt="Vite dev server running with Boosted">
+   ![Vite dev server running with Boosted](/assets/img/guides/vite-dev-server-boosted.png)
 
    Now you can start adding any Boosted 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 Boosted's CSS and JS that you need.
 

site/content/docs/5.3/getting-started/webpack.md

@@ -152,7 +152,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 Boosted's CSS and JavaScript.
 
@@ -265,7 +265,7 @@ Importing Boosted into Webpack requires the loaders we installed in the first se
 
 4. **And you're done! 🎉** With Boosted'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-boosted.png" alt="Webpack dev server running with Boosted">
+   ![Webpack dev server running with Boosted](/assets/img/guides/webpack-dev-server-boosted.png)
 
    Now you can start adding any Boosted 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 Boosted's CSS and JS that you need.
 

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">

site/layouts/_default/single.html

@@ -39,6 +39,11 @@ <h1 class="display-1">{{ .Title | markdownify }}</h1>
     <div class="container-xxl bd-gutter">
     {{ end }}
       {{ .Content }}
+
+      {{ if eq .Title "Examples" -}}
+        {{ partial "examples/main" . }}
+        <!-- Boosted mod: No 'examples/bs-themes' partial -->
+      {{- end }}
     </div>
   </main>
   <!-- End mod -->

site/layouts/partials/examples/main.html

@@ -0,0 +1,74 @@
+{{ range $entry := $.Site.Data.examples -}}
+<div class="bd-content mt-5">
+  <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
+  <p>{{ $entry.description }}</p>
+  {{ if eq $entry.category "RTL" -}}
+    <div class="bd-callout bd-callout-warning small">
+      <p>
+        <strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
+      </p>
+      <p><a href="{{ urls.JoinPath $.Site.Params.repo "issues/new/choose" }}">Please open an issue.</a></p>
+    </div>
+  {{ end -}}
+  {{ if eq $entry.category "Starters" -}}
+    <div class="bd-callout bd-callout-warning mb-4">
+      <p>
+        <strong>To get working Boosted examples based on the Bootstrap ones</strong>, you need to replace all <code>bootstrap</code> occurrences with <code>boosted</code> in some files.
+      </p>
+      <p>
+        You may need to tweak a bit Sass files and add a <code>src/fonts</code> directory to import font family properly in your project.
+        "Import Boosted" sections in our <a href="/docs/{{ $.Site.Params.docs_version }}/getting-started/parcel">Parcel</a>, <a href="/docs/{{ $.Site.Params.docs_version }}/getting-started/vite">Vite</a> or <a href="/docs/{{ $.Site.Params.docs_version }}/getting-started/webpack">Webpack</a> guides could help you.
+      </p>
+    </div>
+  {{ end -}}
+  {{ range $i, $example := $entry.examples -}}
+    {{- $len := len $entry.examples -}}
+    {{ if (eq $i 0) }}<div class="row">{{ end }}
+      {{ if $entry.external -}}
+        <div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
+          <svg class="bi fs-5 flex-shrink-0"><use xlink:href="#box-seam"></use></svg>
+          <div>
+            <h3 class="h5 mb-1">
+              <a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.bootstrap_github_org $example.url }}" target="_blank" rel="noopener">
+                {{ $example.name }}
+              </a>
+            </h3>
+            <p class="text-body-secondary">{{ $example.description }}</p>
+            <p>
+              {{- $indexPath := default "index.html" $example.indexPath -}}
+              {{- $stackBlitzUrl := printf "%s%s%s" (urls.JoinPath "https://stackblitz.com/github/twbs" $example.url) "?file=" ($indexPath | urlquery) }}
+              <a class="icon-link link-secondary link-offset-1" href="{{ $stackBlitzUrl }}" target="_blank" rel="noopener">
+                <svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
+                Edit in StackBlitz
+              </a>
+            </p>
+          </div>
+        </div>
+      {{ else -}}
+        <div class="col-sm-6 col-md-3 mb-3">
+          {{- $exampleNameUrlized := $example.name | urlize -}}
+          {{- $exampleUrl := urls.JoinPath "/docs" $.Site.Params.docs_version "/examples" $exampleNameUrlized "/" }}
+          <a class="d-block link-offset-1" href="{{ $exampleUrl }}"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
+            {{ $imageBasePath := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/img/examples" -}}
+            {{- $imgPath := urls.JoinPath $imageBasePath (printf "%s.png" $exampleNameUrlized) -}}
+            {{- $imgPath2x := urls.JoinPath $imageBasePath (printf "%[email protected]" $exampleNameUrlized) -}}
+            {{- with (imageConfig (path.Join "/site/static" $imgPath)) -}}
+            <img class="img-thumbnail mb-3"
+                 srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
+                 src="{{ $imgPath }}"
+                 alt=""
+                 width="{{ .Width }}"
+                 height="{{ .Height }}"
+                 loading="lazy">
+            {{- end }}
+            <h3 class="h5 mb-1">
+              {{ $example.name }}
+            </h3>
+          </a>
+          <p class="text-body-secondary">{{ $example.description }}</p>
+        </div>
+      {{- end }}
+    {{ if (eq (add $i 1) $len) }}</div>{{ end -}}
+  {{ end -}}
+</div>
+{{ end -}}

site/layouts/partials/home/orange-design-system.html

@@ -15,13 +15,9 @@ <h2 class="mb-3 fw-semibold lh-sm">Orange Design System for web</h2>
     </p>
   </div>
   <div class="col-lg-6">
-    <img class="img-fluid mt-3 mx-auto"
-      srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-guidelines.png,
-              /docs/{{ .Site.Params.docs_version }}/assets/img/[email protected] 2x"
-      src="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-guidelines.png"
-      alt="Boosted design guidelines"
-      width="460"
-      height="345"
-      loading="lazy">
+    {{ partial "responsive-img" (dict "context" .
+      "imgPath" "/assets/img/boosted-guidelines.png"
+      "alt" "Boosted design guidelines"
+      "classes" "d-block mt-3") }}
   </div>
 </section>

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 }}