Skip to content

Updated 404 page to include left sidebar. #326

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
stumbo wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Updated 404 page to include left sidebar. #326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions assets/scss/_styles_project.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,19 @@
}
}

// 404 page sidebar styling
.td-404 .td-sidebar-nav h5 {
font-size: 16px;
padding-left: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #dee2e6;
margin-left: 0;
}

.td-404 .td-sidebar-nav__section {
padding-left: 1rem;
}

// Keep search visible on mobile, wrap to second row
@media (max-width: 991.98px) {
.td-navbar-container {
Expand Down
40 changes: 32 additions & 8 deletions layouts/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,34 @@
{{ define "main" }}
<main id="main">
<div>
<h1 id="title">Page Not Found</h1>
<p>The page or document you were trying to reach does not exist. It might have been moved or removed. If you are following a link from some other source, please let us know so we can correct the problem.</p>
<p>Please check the URL for typos or
<a href="{{ "" | relURL }}">visit our homepage</a>.</p>
</div>
</main>
<div class="td-main">
<div class="row flex-xl-nowrap">
<aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
<div class="td-sidebar__inner">
<form class="td-sidebar__search d-flex align-items-center">
<div class="td-search">
<div class="td-search__icon"></div>
<input type="search" name="q" class="td-search__input form-control td-search-input" placeholder="Search this site…" aria-label="Search this site…" autocomplete="off">
</div>
Comment on lines +6 to +10
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The sidebar search <form> currently has no action, so submitting (e.g., pressing Enter) will navigate to /404.html?q=... rather than the site’s search results page (content/en/search.md defines a /search/ page). Unless JavaScript intercepts the submit, this makes the search box non-functional as a basic fallback. Set the form action to the search page URL (and keep method="get" with the existing q parameter) so it works without JS/interception.

Copilot uses AI. Check for mistakes.
</form>
<nav class="td-sidebar-nav">
<h5 class="mt-3 mb-2">Site Sections</h5>
<ul class="td-sidebar-nav__section pe-md-3 ul-0 list-unstyled">
{{ range site.Menus.main }}
<li class="td-sidebar-nav__section-title my-2">
<a href="{{ .URL }}" class="td-sidebar-link">
{{ if .Pre }}{{ .Pre | safeHTML }} {{ end }}{{ .Name }}
</a>
</li>
{{ end }}
</ul>
</nav>
</div>
</aside>
<main class="col-12 col-md-9 col-xl-8 ps-md-5" role="main">
<h1>Page Not Found</h1>
<p class="lead">The page you were looking for doesn't exist. It may have been moved or removed.</p>
<p>You can use the search box or browse the site sections on the left to find what you're looking for.</p>
<p>Or <a href="{{ "" | relURL }}">return to the homepage</a>.</p>
</main>
Comment on lines +26 to +31
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because this file is a define "main" template, it will typically be inserted into a base template that already contains the page’s primary <main role="main"> element. Introducing another <main ... role="main"> here risks invalid nested <main> landmarks (and duplicate role="main"), which can confuse assistive technologies. Prefer using a <div>/<section> for this inner column, and let the base template provide the single page-level <main> landmark.

Suggested change
<main class="col-12 col-md-9 col-xl-8 ps-md-5" role="main">
<h1>Page Not Found</h1>
<p class="lead">The page you were looking for doesn't exist. It may have been moved or removed.</p>
<p>You can use the search box or browse the site sections on the left to find what you're looking for.</p>
<p>Or <a href="{{ "" | relURL }}">return to the homepage</a>.</p>
</main>
<section class="col-12 col-md-9 col-xl-8 ps-md-5">
<h1>Page Not Found</h1>
<p class="lead">The page you were looking for doesn't exist. It may have been moved or removed.</p>
<p>You can use the search box or browse the site sections on the left to find what you're looking for.</p>
<p>Or <a href="{{ "" | relURL }}">return to the homepage</a>.</p>
</section>

Copilot uses AI. Check for mistakes.
</div>
</div>
Comment on lines +2 to +33
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This template defines the main block, so it will be rendered inside Docsy’s base layout. Docsy’s base layout already provides the .td-main + .row flex-xl-nowrap grid wrapper (see layouts/bibliography/baseof.html:13-16 as an in-repo example), so adding another .td-main/.row here can lead to nested grids and unexpected spacing/column behavior. Consider moving the sidebar layout up into an overridden base template for just the 404 kind (or render a full-page 404 template rather than reintroducing the outer grid inside the main block).

Suggested change
<div class="td-main">
<div class="row flex-xl-nowrap">
<aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
<div class="td-sidebar__inner">
<form class="td-sidebar__search d-flex align-items-center">
<div class="td-search">
<div class="td-search__icon"></div>
<input type="search" name="q" class="td-search__input form-control td-search-input" placeholder="Search this site…" aria-label="Search this site…" autocomplete="off">
</div>
</form>
<nav class="td-sidebar-nav">
<h5 class="mt-3 mb-2">Site Sections</h5>
<ul class="td-sidebar-nav__section pe-md-3 ul-0 list-unstyled">
{{ range site.Menus.main }}
<li class="td-sidebar-nav__section-title my-2">
<a href="{{ .URL }}" class="td-sidebar-link">
{{ if .Pre }}{{ .Pre | safeHTML }} {{ end }}{{ .Name }}
</a>
</li>
{{ end }}
</ul>
</nav>
</div>
</aside>
<main class="col-12 col-md-9 col-xl-8 ps-md-5" role="main">
<h1>Page Not Found</h1>
<p class="lead">The page you were looking for doesn't exist. It may have been moved or removed.</p>
<p>You can use the search box or browse the site sections on the left to find what you're looking for.</p>
<p>Or <a href="{{ "" | relURL }}">return to the homepage</a>.</p>
</main>
</div>
</div>
<aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
<div class="td-sidebar__inner">
<form class="td-sidebar__search d-flex align-items-center">
<div class="td-search">
<div class="td-search__icon"></div>
<input type="search" name="q" class="td-search__input form-control td-search-input" placeholder="Search this site…" aria-label="Search this site…" autocomplete="off">
<input type="hidden" name="sites" value="{{ .Site.BaseURL }}">
</div>
</form>
<nav class="td-sidebar-nav">
<h5 class="mt-3 mb-2">Site Sections</h5>
<ul class="td-sidebar-nav__section pe-md-3 ul-0 list-unstyled">
{{ range site.Menus.main }}
<li class="td-sidebar-nav__section-title my-2">
<a href="{{ .URL }}" class="td-sidebar-link">
{{ if .Pre }}{{ .Pre | safeHTML }} {{ end }}{{ .Name }}
</a>
</li>
{{ end }}
</ul>
</nav>
</div>
</aside>
<main class="col-12 col-md-9 col-xl-8 ps-md-5" role="main">
<h1>Page Not Found</h1>
<p class="lead">The page you were looking for doesn't exist. It may have been moved or removed.</p>
<p>You can use the search box or browse the site sections on the left to find what you're looking for.</p>
<p>Or <a href="{{ "" | relURL }}">return to the homepage</a>.</p>
</main>

Copilot uses AI. Check for mistakes.
{{ end }}