Skip to content

Commit

Permalink
feat(docs): use Footer component in docs (#1280)
Browse files Browse the repository at this point in the history 
Co-authored-by: Louis-Maxime Piton <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
  • Loading branch information
@hannahiss @louismaximepiton @julien-deramond
3 people authored Jul 8, 2022
1 parent ff301e1 commit bc91bbe
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 67 deletions.
16 changes: 1 addition & 15 deletions site/assets/scss/_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,4 @@
// Footer
//

.bd-footer {
@include font-size(.875rem);
position: sticky;
top: 100vh;
font-weight: 700;

a {
color: var(--#{$prefix}link-color); // Boosted mod: use CSS var instead of $link-color

&:hover,
&:focus {
color: var(--#{$prefix}link-hover-color); // Boosted mod: use CSS var instead of $link-hover-color
}
}
}
// Boosted mod: no .bd-footer
161 changes: 109 additions & 52 deletions site/layouts/partials/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,113 @@
<footer class="bd-footer py-3 py-md-4 mt-5 bg-dark">
<div class="container-xxl py-1">
<div class="row">
<div class="col-lg-3 mb-3">
<p class="mb-1">This documentation is an adaptation made by Orange.</p>
<p class="mb-1">Original version designed and built with all the love in the world by the <a href="https://github.com/orgs/twbs/people">Bootstrap core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">their contributors</a>.</p>
<p class="mb-md-1">
Orange modified code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>
—&nbsp;just like <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">Bootstrap</a>,
docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.
</p>
<ul class="bd-footer-links ps-0 mb-0">
<li class="list-inline-item me-3 mb-3 mb-md-0 d-block d-md-inline-block"><span>Currently v{{ .Site.Params.current_version }}</span></li>
<li class="list-inline-item mt-3 mt-md-0"><a href="https://www.netlify.com">
<img src="https://www.netlify.com/img/global/badges/netlify-dark.svg" alt="Deploys by Netlify" width="89" height="40"/>
</a></li>
</ul>
<footer class="footer bg-dark navbar-dark bd-footer">
<h2 class="visually-hidden">Boosted sitemap & information</h2>
<div class="container-xxl footer-nav">
<nav class="accordion accordion-dark" id="sitemapAccordion" aria-label="Boosted sitemap footer">
<div class="row">
<div class="footer-column col-md-6 col-lg-2">
<h3 class="accordion-header footer-heading" id="headingLinks">
<button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseLinks" aria-expanded="true"
aria-controls="collapseLinks">
Links
</button>
<span class="d-none d-md-flex">Links</span>
</h3>
<div id="collapseLinks" class="container-xxl accordion-collapse collapse" data-bs-parent="#sitemapAccordion">
<ul class="navbar-nav">
<li><a class="nav-link" href="/" aria-describedby="headingLinks">Home</a></li>
<li><a class="nav-link" href="/docs/{{ .Site.Params.docs_version }}/"
aria-describedby="headingLinks">Docs</a></li>
<li><a class="nav-link" href="/docs/{{ .Site.Params.docs_version }}/examples/"
aria-describedby="headingLinks">Examples</a></li>
<li><a class="nav-link" href="/docs/{{ .Site.Params.docs_version }}/guidelines/"
aria-describedby="headingLinks">Design guidelines</a></li>
<!-- Boosted mod: removed .Site.Params.themes and .Site.Params.blog -->
</ul>
</div>
</div>
<div class="footer-column col-md-6 col-lg-2">
<h3 class="accordion-header footer-heading" id="headingGuides">
<button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseGuides" aria-expanded="true"
aria-controls="collapseGuides">
Guides
</button>
<span class="d-none d-md-flex">Guides</span>
</h3>
<div id="collapseGuides" class="container-xxl accordion-collapse collapse" data-bs-parent="#sitemapAccordion">
<ul class="navbar-nav">

<li><a class="nav-link" href="/docs/{{ .Site.Params.docs_version }}/getting-started/"
aria-describedby="headingGuides">Getting started</a></li>
<li><a class="nav-link" href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack/"
aria-describedby="headingGuides">Webpack</a></li>
<li><a class="nav-link" href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel/"
aria-describedby="headingGuides">Parcel</a></li>
</ul>
</div>
</div>
<div class="footer-column col-md-6 col-lg-2">
<h3 class="accordion-header footer-heading" id="headingProjects">
<button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseProjects" aria-expanded="true"
aria-controls="collapseProjects">
Projects
</button>
<span class="d-none d-md-flex">Projects</span>
</h3>
<div id="collapseProjects" class="container-xxl accordion-collapse collapse" data-bs-parent="#sitemapAccordion">
<ul class="navbar-nav">
<li><a class="nav-link" href="{{ .Site.Params.repo }}" aria-describedby="headingProjects">Boosted 5</a>
</li>
<li><a class="nav-link" href="{{ .Site.Params.repo }}/tree/v4-dev" aria-describedby="headingProjects">Boosted
4</a></li>
<li><a class="nav-link" href="{{ .Site.Params.bootstrap }}"
aria-describedby="headingProjects">Bootstrap</a></li>
<li><a class="nav-link" href="https://boosted.netlify.app" aria-describedby="headingGuides">Pre-release on
Netlify</a></li>
</ul>
</div>
</div>
<div class="footer-column col-md-6 col-lg-2">
<h3 class="accordion-header footer-heading" id="headingCommunity">
<button class="accordion-button collapsed container-xxl px-1 d-md-none" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseCommunity" aria-expanded="true"
aria-controls="collapseCommunity">
Community
</button>
<span class="d-none d-md-flex">Community</span>
</h3>
<div id="collapseCommunity" class="container-xxl accordion-collapse collapse" data-bs-parent="#sitemapAccordion">
<ul class="navbar-nav">
<li><a class="nav-link" href="{{ .Site.Params.repo }}/issues" aria-describedby="headingCommunity">Issues</a>
</li>
<li><a class="nav-link" href="{{ .Site.Params.repo }}/discussions" aria-describedby="headingCommunity">Discussions</a>
</li>
</ul>
</div>
</div>
<div class="footer-column accordion-header col-md-12 col-lg-4 mb-3 pt-3 pt-lg-4 px-1 px-lg-0 fw-bold small">
<p class="mb-lg-1">This documentation is an adaptation made by Orange. Original version designed and built with
all the love in the world by the <a href="https://github.com/orgs/twbs/people">Bootstrap core team</a> with
the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">their contributors</a>.</p>
<p class="mb-lg-1">
Orange modified code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank"
rel="license noopener">MIT</a>
-&nbsp;just like <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank"
rel="license noopener">Bootstrap</a>,
docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY
3.0</a>.
</p>
<p class="mb-lg-1">Currently v{{ .Site.Params.current_version }}.</p>
<p class="mb-lg-1">
<a href="https://www.netlify.com">
<img src="https://www.netlify.com/img/global/badges/netlify-dark.svg" alt="Deployed by Netlify" width="89"
height="40"/>
</a>
</p>
</div>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="/">Home</a></li>
<li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/">Docs</a></li>
<li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li>
<!-- Boosted mod: removed .Site.Params.themes and .Site.Params.blog -->
</ul>
</div>
<div class="col-6 col-lg-2 mb-1">
<h5>Guides</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/">Getting started</a></li>
<li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/examples/starter-template/">Starter template</a></li>
<li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack/">Webpack</a></li>
<li class="mb-2"><a href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel/">Parcel</a></li>
</ul>
</div>
<div class="col-6 col-lg-2 mb-1">
<h5>Projects</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="{{ .Site.Params.repo }}">Boosted 5</a></li>
<li class="mb-2"><a href="{{ .Site.Params.repo }}/tree/v4-dev">Boosted 4</a></li>
<li class="mb-2"><a href="{{ .Site.Params.bootstrap }}">Bootstrap</a></li>
<li class=""><a href="https://boosted.netlify.app">Pre-release on Netlify</a></li>
</ul>
</div>
<div class="col-6 col-lg-2 mb-1">
<h5>Community</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="{{ .Site.Params.repo }}/issues">Issues</a></li>
<li class="mb-2"><a href="{{ .Site.Params.repo }}/discussions">Discussions</a></li>
</ul>
</div>
</div>
</nav>
</div>
</footer>
<!-- Boosted mod: back-to-top component -->
Expand Down

0 comments on commit bc91bbe

Please sign in to comment.