Files
tabler/docs/pages/404.astro

43 lines
1.8 KiB
Plaintext

---
// Branded 404 page. Astro emits it as 404.html; the Vercel adapter already
// routes every unmatched URL to /404.html with a 404 status.
// Excluded from sitemap.xml.ts and absent from docs.json on purpose.
import DocsLayout from '@layouts/DocsLayout.astro'
import Illustration from '@ui/Illustration.astro'
import Icon from '@ui/Icon.astro'
---
<DocsLayout title="Page not found" summary="The page you are looking for does not exist or has been moved." description="The page you are looking for does not exist. Browse the Tabler documentation sections or use the search." hidePagination url="/404" editPath="docs/pages/404.astro">
<div class="py-4" aria-hidden="true">
<Illustration image="not-found.svg" class="d-block mx-auto mw-100" height={240} />
</div>
<p>The link may be broken, or the page may have been moved. Try searching the documentation or go back to the homepage.</p>
<div class="btn-list justify-content-center mt-6">
<a href="/" class="btn">
<Icon name="arrow-left" />
Back to homepage
</a>
<button type="button" class="btn btn-primary" id="docs-404-search">
<Icon name="search" />
Search the docs
</button>
</div>
</DocsLayout>
<script>
// Forward the CTA to the sidebar search input — clicking it lazy-loads
// DocSearch and opens the modal (see DocsSearch.astro). When search is
// disabled (no DOCSEARCH_* env), that input is hidden and the CTA follows.
const searchInput = document.getElementById('docs-search-input')
const searchButton = document.getElementById('docs-404-search')
if (searchButton) {
if (searchInput && !searchInput.closest('.docs-search')?.classList.contains('d-none')) {
searchButton.addEventListener('click', () => searchInput.click())
} else {
searchButton.classList.add('d-none')
}
}
</script>