Skip to content

Commit 626ffb6

Browse files
OlufunkeMoronfoluOlufunkeMoronfolu
authored
Doc optimization for GSC and mobile viewers (mendix#10854)
* Switching the ordering of content for GSC crawling * Adding hamburger nav for mobile users * fixing the ordering for crawler * removing the minification configuration by setting to false
1 parent b07916e commit 626ffb6

6 files changed

Lines changed: 183 additions & 58 deletions

File tree

‎assets/scss/_styles_project.scss‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -464,6 +464,28 @@ img {
464464
}
465465
}
466466

467+
/* Olu - Position the mobile close button and remove extra top spacing so content aligns */
468+
#td-sidebar-menu > .d-flex.d-md-none {
469+
position: absolute;
470+
top: 0.5rem;
471+
right: 0.5rem;
472+
z-index: 1060;
473+
}
474+
475+
#td-sidebar-menu {
476+
padding-top: 0;
477+
}
478+
479+
#td-sidebar-menu .td-sidebar__search {
480+
margin-top: 0; /* ensure search sits at top level */
481+
padding-top: 0;
482+
}
483+
484+
#td-sidebar-menu nav.td-sidebar-nav {
485+
margin-top: 0;
486+
padding-top: 0.25rem;
487+
}
488+
467489
// Responsive tables
468490
//
469491
// Generate series of `.table-responsive-*` classes for configuring the screen
@@ -607,4 +629,54 @@ img.ToC-icon{
607629
&:hover {
608630
background-color: $gray-light;
609631
};
632+
}
633+
634+
// Olu - Mobile sidebar open/close behaviour (apply to small and medium screens)
635+
@include media-breakpoint-down(md) {
636+
body.td-sidebar-open {
637+
overflow: hidden;
638+
}
639+
640+
.td-sidebar {
641+
display: block !important;
642+
position: fixed;
643+
top: 0;
644+
left: 0;
645+
height: 100vh;
646+
width: 80%;
647+
max-width: 340px;
648+
z-index: 1055;
649+
background-color: $td-sidebar-bg-color;
650+
transform: translateX(-100%);
651+
transition: transform .25s ease-in-out;
652+
box-shadow: 0 0 0.5rem rgba(0,0,0,0.2);
653+
}
654+
655+
body.td-sidebar-open .td-sidebar {
656+
transform: translateX(0);
657+
}
658+
659+
.td-sidebar-overlay {
660+
display: none;
661+
position: fixed;
662+
inset: 0;
663+
z-index: 1050;
664+
background: rgba(0,0,0,0.45);
665+
}
666+
667+
body.td-sidebar-open .td-sidebar-overlay {
668+
display: block;
669+
}
670+
671+
/* adjustment for the close button in the sidebar */
672+
#td-mobile-sidebar-close {
673+
font-size: 1.1rem;
674+
}
675+
676+
// Ensure the scrolling container inside the off-canvas sidebar fills more of the viewport
677+
.td-sidebar__inner {
678+
height: calc(100vh - 1.5rem) !important;
679+
overflow-y: auto;
680+
padding-top: 1.25rem;
681+
}
610682
}

‎config/_default/hugo.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ replacements = "github.com/FortAwesome/Font-Awesome -> ., github.com/twbs/bootst
8484

8585
# Olu - Minification configuration
8686
[minify]
87-
minifyOutput = true
87+
minifyOutput = false
8888

8989
# Everything below this are Site Params
9090
# ======================================

‎layouts/docs/baseof.html‎

Lines changed: 66 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,70 @@
11
<!doctype html>
22
<html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Lang }}" class="no-js">
3-
<head>
4-
{{ partial "head.html" . }}
5-
</head>
6-
<!-- DB – Check for numberless_headings -->
7-
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}{{ if .Params.numberless_headings }} numberless_headings{{ end }}">
8-
{{/* NK - deactivation of original navbar
9-
<header>
10-
{{ partial "navbar.html" . }}
11-
</header>
3+
<head>
4+
{{ partial "head.html" . }}
5+
</head>
6+
<!-- DB – Check for numberless_headings -->
7+
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}{{ if .Params.numberless_headings }} numberless_headings{{ end }}">
8+
{{/* NK - deactivation of original navbar
9+
<header>
10+
{{ partial "navbar.html" . }}
11+
</header>
1212
*/}}
13-
<div class="container-fluid td-outer">
14-
<div class="td-main">
15-
<div class="row flex-xl-nowrap stretch-main">
16-
<aside data-stt-ignore class="d-none d-lg-block col-lg-4 col-xl-3 td-sidebar d-print-none" data-proofer-ignore> <!-- NK - adjusted resizing for different screens/MvM - ignore for htmltest and translation -->
17-
{{ partial "sidebar.html" . }}
18-
</aside>
19-
<aside data-stt-ignore class="d-none d-xl-block col-xl-3 td-sidebar-toc d-print-none" data-proofer-ignore> <!-- NK - adjusted resizing for different screens/MvM - ignore for htmltest and translation -->
20-
{{ partial "page-meta-links.html" . }}
21-
<!-- NK - insert of layout element for line break and ToC title -->
22-
<span class="d-block p-2">
23-
<hr>
24-
<a class="toc-title" href="{{ .Permalink }}">{{ .Title }}</a> <!-- NK - insert of title into ToC -->
25-
</span>
26-
{{ partial "toc.html" . }}
27-
{{ partial "taxonomy_terms_clouds.html" . }}
28-
</aside>
29-
<main class="col-12 col-lg-8 col-xl-6" role="main"> <!-- NK - adjusted resizing for different screens -->
30-
<!-- MvM - Do a test for missing Title -->
31-
{{ if not .Title }}
32-
{{ warnf "File %s \n\t\t\t\thas no title in the front matter\n " .Page.File.Path }}
33-
{{ end }}
34-
<!-- NK - START of addition of versions selector menu,
35-
taken from themes\docsy\layouts\partials\navbar.html,
36-
this might get moved again, with further styling changes -->
37-
{{ if .Site.Params.versions }}
38-
<li class="nav-item dropdown mr-4 d-none d-lg-block">
39-
{{ partial "navbar-version-selector.html" . }}
40-
</li>
41-
{{ end }}
42-
<!-- END of addition -->
43-
<!-- MvM: Move breadcrumb above banner -->
44-
{{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
45-
46-
{{ partial "version-banner.html" . }}
47-
48-
{{ block "main" . }}{{ end }}
49-
</main>
50-
</div>
51-
</div>
52-
{{ partial "footer.html" . }}
53-
</div>
54-
{{ partial "scripts.html" . }}
55-
</body>
13+
<div class="container-fluid td-outer">
14+
<div class="td-main">
15+
<div class="row flex-md-nowrap stretch-main">
16+
<main class="col-12 col-md-8 col-lg-5 col-xl-6 order-md-2" role="main"> <!-- Adjusted: show sidebar at md, 3-col layout at lg+ -->
17+
<!-- Olu - Mobile header row: hamburger + breadcrumb/banner (mobile only) -->
18+
<div class="d-flex d-md-none align-items-center td-content">
19+
<button id="td-mobile-sidebar-btn" class="btn btn-link p-0 me-2 align-self-center" aria-label="Open sidebar">
20+
<span class="fas fa-bars text-dark fs-4 fa-fw" aria-hidden="true"></span>
21+
<span class="sr-only">Menu</span>
22+
</button>
23+
<div class="flex-grow-1">
24+
{{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
25+
{{ partial "version-banner.html" . }}
26+
</div>
27+
</div>
28+
<!-- MvM - Do a test for missing Title -->
29+
{{ if not .Title }}
30+
{{ warnf "File %s \n\t\t\t\thas no title in the front matter\n " .Page.File.Path }}
31+
{{ end }}
32+
<!-- NK - START of addition of versions selector menu,
33+
taken from themes\docsy\layouts\partials\navbar.html,
34+
this might get moved again, with further styling changes -->
35+
{{ if .Site.Params.versions }}
36+
<li class="nav-item dropdown mr-4 d-none d-md-block">
37+
{{ partial "navbar-version-selector.html" . }}
38+
</li>
39+
{{ end }}
40+
<!-- END of addition -->
41+
<!-- MvM: Move breadcrumb above banner (tablet and up) -->
42+
<div class="d-none d-md-block w-100">
43+
{{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
44+
{{ partial "version-banner.html" . }}
45+
</div>
46+
47+
{{ block "main" . }}{{ end }}
48+
</main>
49+
<aside data-stt-ignore class="d-none d-md-block col-md-4 col-lg-4 col-xl-3 td-sidebar d-print-none order-md-1" data-proofer-ignore> <!-- Show sidebar at md+ -->
50+
{{ partial "sidebar.html" . }}
51+
</aside>
52+
<aside data-stt-ignore class="d-none d-lg-block col-lg-3 col-xl-3 td-sidebar-toc d-print-none order-lg-3" data-proofer-ignore> <!-- Show ToC at lg+ -->
53+
{{ partial "page-meta-links.html" . }}
54+
<!-- NK - insert of layout element for line break and ToC title -->
55+
<span class="d-block p-2">
56+
<hr>
57+
<a class="toc-title" href="{{ .Permalink }}">{{ .Title }}</a> <!-- NK - insert of title into ToC -->
58+
</span>
59+
{{ partial "toc.html" . }}
60+
{{ partial "taxonomy_terms_clouds.html" . }}
61+
</aside>
62+
</div>
63+
</div>
64+
<div id="td-sidebar-overlay" class="td-sidebar-overlay d-md-none" aria-hidden="true"></div>
65+
{{ partial "footer.html" . }}
66+
</div>
67+
{{ partial "scripts.html" . }}
68+
</body>
5669
</html>
70+

‎layouts/landingpage/landingpage.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,13 @@
1616

1717
<!-- Main page content (everything except the left sidebar, top dock, and footer) -->
1818
<main class="col lp" role="main" style="border-right: none;">
19+
<!-- Olu - Mobile header row: hamburger (mobile only) -->
20+
<div class="d-flex d-md-none align-items-start">
21+
<button id="td-mobile-sidebar-btn" class="btn btn-link p-0 me-2 align-items-center" aria-label="Open sidebar">
22+
<span class="fas fa-bars text-dark fs-4 fa-fw" aria-hidden="true"></span>
23+
<span class="sr-only">Menu</span>
24+
</button>
25+
</div>
1926
<div class="container lp-container">
2027

2128
<!-- Title, Description, and Illustration -->

‎layouts/partials/scripts.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,4 +106,29 @@
106106
{{ end -}}
107107

108108
<script src='{{ "js/tabpane-persist.js" | relURL }}'></script>
109+
<!-- Olu - Mobile sidebar toggle script -->
110+
<script>
111+
(function () {
112+
var openBtn = document.getElementById('td-mobile-sidebar-btn');
113+
var closeBtn = document.getElementById('td-mobile-sidebar-close');
114+
var overlay = document.getElementById('td-sidebar-overlay');
115+
var sectionNav = document.getElementById('td-section-nav');
116+
function toggleSidebar() {
117+
document.body.classList.toggle('td-sidebar-open');
118+
if (sectionNav) {
119+
sectionNav.classList.toggle('show');
120+
}
121+
}
122+
function closeSidebar() {
123+
document.body.classList.remove('td-sidebar-open');
124+
if (sectionNav) {
125+
sectionNav.classList.remove('show');
126+
}
127+
}
128+
if (openBtn) openBtn.addEventListener('click', toggleSidebar);
129+
if (closeBtn) closeBtn.addEventListener('click', closeSidebar);
130+
if (overlay) overlay.addEventListener('click', closeSidebar);
131+
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeSidebar(); });
132+
})();
133+
</script>
109134
{{ partial "hooks/body-end.html" . -}}

‎layouts/partials/sidebar-tree.html‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,25 @@
22
{{ $sidebarCacheLimit := cond (isset .Site.Params.ui "sidebar_cache_limit") .Site.Params.ui.sidebar_cache_limit 2000 -}}
33
{{ $shouldDelayActive := ge (len .Site.Pages) $sidebarCacheLimit -}}
44
<div id="td-sidebar-menu" class="td-sidebar__inner overflow-auto"> <!-- NK - added overflow-auto for scrolling: MvM - removed conditional d-none (`{{ if $shouldDelayActive }} d-none{{ end }}` to show navigation on non-JS sites -->
5+
<!-- Olu - Mobile sidebar close button -->
6+
<div class="d-flex d-md-none justify-content-end p-2 text-dark">
7+
<button id="td-mobile-sidebar-close" class="btn btn-link p-0" aria-label="Close sidebar">
8+
<span class="fas fa-times text-dark" aria-hidden="true"></span>
9+
<span class="sr-only">Close</span>
10+
</button>
11+
</div>
512
{{ if not .Site.Params.ui.sidebar_search_disable -}}
613
<form class="td-sidebar__search d-flex align-items-center">
714
{{ partial "search-input.html" . }}
8-
<button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-bs-toggle="collapse" data-bs-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
15+
<button class="btn btn-link td-sidebar__toggle d-none p-0 ml-3 fas fa-bars" type="button" data-bs-toggle="collapse" data-bs-target="#td-section-nav" aria-controls="#td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
916
</button>
1017
</form>
1118
{{ else -}}
1219
<div id="content-mobile">
13-
<form class="td-sidebar__search d-flex align-items-center">
14-
{{ partial "search-input.html" . }}
15-
<button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-bs-toggle="collapse" data-bs-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="Toggle section navigation"> </button>
16-
</form>
20+
<form class="td-sidebar__search d-flex align-items-center">
21+
{{ partial "search-input.html" . }}
22+
<button class="btn btn-link td-sidebar__toggle d-none p-0 ml-3 fas fa-bars" type="button" data-bs-toggle="collapse" data-bs-target="#td-section-nav" aria-controls="#td-section-nav" aria-expanded="false" aria-label="Toggle section navigation"> </button>
23+
</form>
1724
</div>
1825
<div id="content-desktop"></div>
1926
{{ end -}}

0 commit comments

Comments
 (0)