Add illustrations to the docs 404 and preview 500 error pages (#2913)

.changeset/docs-404-illustration-search.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Added the `not-found` illustration and a search button to the docs 404 page.

.changeset/preview-500-illustration.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Added the `500` illustration to the preview 500 error page.

docs/pages/404.astro

@@ -3,23 +3,40 @@
 // 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 DocsCard from '@components/DocsCard.astro'
+import Illustration from '@ui/Illustration.astro'
-
+import Icon from '@ui/Icon.astro'
-const sections = [
-  { title: 'UI Components', href: '/ui', icon: 'paint', description: 'Free and open source web application UI kit based on Bootstrap' },
-  { title: 'Plugins', href: '/ui/plugins', icon: 'plug', description: 'Free and open source plugins for Tabler UI components' },
-  { title: 'Icons', href: '/icons', icon: 'ghost', description: 'Pixel-perfect icons for web design and development' },
-  { title: 'Illustrations', href: '/illustrations', icon: 'brand-figma', description: 'Customizable SVG illustrations for your web project' },
-  { title: 'Email Templates', href: '/emails', icon: 'mail', description: 'Responsive email templates ready to use in your marketing campaigns' },
-]
 ---
 
 <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">
-  <p>Check the address for typos, use the search at the top of the page, or start from one of the sections below.</p>
+  <div class="py-4" aria-hidden="true">
+    <Illustration image="not-found.svg" class="d-block mx-auto mw-100" height={240} />
+  </div>
 
-  <div class="mt-6">
+  <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="row row-deck row-cards">
+
-      {sections.map((section) => <DocsCard href={section.href} title={section.title} description={section.description} icon={section.icon} />)}
+  <div class="btn-list justify-content-center mt-6">
-    </div>
+    <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>

shared/data/errors.json

@@ -17,6 +17,7 @@
     "description": "We are sorry but the page you are looking for was not found"
   },
   "500": {
+    "illustration": "500.svg",
     "title": 500,
     "description": "We are sorry but our server encountered an internal error"
   },

shared/data/free-illustrations.json

@@ -1 +1 @@
-{"light":{"not-found":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"600\" fill=\"none\" viewBox=\"0 0 800 600\"><path d=\"M623.916 531.347C623.916 534.35 522.081 536.782 396.36 536.782C270.639 536.782 168.803 534.35 168.803 531.347C168.803 528.343 270.639 525.912 396.36 525.912C522.081 525.912 623.916 528.343 623.916 531.347Z\" fill=\"#A7AAB3\"/><path d=\"M149.638 288.057C149.638 327.819 191.688 356.567 210.138 388.606C229.304 421.645 233.881 472.277 266.92 491.299C298.958 509.893 344.584 489.154 384.346 489.154C424.107 489.154 469.733 509.893 501.771 491.299C534.811 472.134 539.387 421.645 558.553 388.606C577.147 356.567 619.054 327.676 619.054 288.057C619.054 248.439 577.004 219.547 558.553 187.509C539.53 154.47 534.811 103.838 501.771 84.8153C469.733 66.2217 424.107 86.9607 384.346 86.9607C344.584 86.9607 298.958 66.2217 266.92 84.8153C233.881 103.981 229.304 154.47 210.138 187.509C191.545 219.547 149.638 248.439 149.638 288.057Z\" fill=\"rgba(0, 20, 80, .04)\"/><path d=\"M510.067 239.857L504.918 266.317H445.132L450.138 240.858L445.132 239.857L388.208 529.201L393.213 530.203L398.505 503.17H458.291L453.142 529.201L458.148 530.203L515.073 240.715L510.067 239.857ZM503.917 271.323L493.476 324.243H433.69L444.131 271.323H503.917ZM422.248 382.169L432.689 329.249H492.475L482.034 382.169H422.248ZM481.175 387.318L470.734 440.238H410.949L421.39 387.318H481.175ZM399.507 498.164L409.948 445.244H469.733L459.292 498.164H399.507Z\" fill=\"#232B41\"/><path d=\"M556.694 450.822L548.112 406.77L515.216 239.714L510.067 240.715L515.073 266.031H455.43L450.281 239.714L445.132 240.715L502.057 530.203L507.206 529.201L502.057 503.313H561.7L566.992 530.203L572.141 529.201L556.694 450.822ZM456.431 271.466H516.074L526.372 324.243H466.729L456.431 271.466ZM467.874 329.392H527.516L537.814 382.169H478.172L467.874 329.392ZM479.316 387.461H538.958L544.393 414.922L549.399 440.095H489.614L479.316 387.461ZM501.056 498.164L490.758 445.387H550.401L550.687 446.818L551.259 449.821L560.699 498.164H501.056Z\" fill=\"#A7AAB3\"/><path d=\"M556.694 450.823L551.116 449.821L550.544 446.818L550.257 445.387H526.658C527.945 443.099 529.948 441.24 532.379 440.095H549.113L544.107 414.923L547.826 406.913L556.694 450.823Z\" fill=\"black\" opacity=\"0.22\"/><path d=\"M263.201 69.7974H529.948C538.529 69.7974 545.394 76.6627 545.394 85.2443V237.855C545.394 246.436 538.529 253.302 529.948 253.302H263.201C254.62 253.302 247.754 246.436 247.754 237.855V85.3874C247.754 76.8057 254.62 69.7974 263.201 69.7974Z\" fill=\"white\"/><path d=\"M529.947 66.2217H263.201C252.617 66.2217 244.036 74.8033 244.036 85.3874V237.998C244.036 248.582 252.617 257.163 263.201 257.163H529.947C540.531 257.163 549.113 248.582 549.113 237.998V85.3874C549.113 74.8033 540.531 66.2217 529.947 66.2217ZM541.819 237.855C541.819 242.431 539.101 246.722 534.953 248.582C533.38 249.297 531.664 249.726 529.947 249.726H263.201C256.622 249.726 251.33 244.434 251.33 237.855V85.3874C251.33 78.8081 256.622 73.5161 263.201 73.5161H529.947C536.527 73.5161 541.819 78.8081 541.819 85.3874V237.855Z\" fill=\"#232B41\"/><path d=\"M507.206 257.163H458.577C455.716 255.018 453.142 252.587 450.71 249.869C450.424 249.583 450.138 249.154 449.852 248.868C444.846 243.29 441.557 236.424 440.269 229.13C440.126 228.558 440.126 227.843 439.983 227.414C440.842 224.124 443.845 221.693 447.135 221.55C449.28 221.693 451.283 222.694 452.57 224.41C454.715 228.701 457.433 232.563 460.722 235.852C465.299 240.429 470.019 243.147 476.455 246.007C486.324 250.584 496.622 254.303 507.206 257.163Z\" fill=\"black\" opacity=\"0.19\"/><path d=\"M306.825 129.726L287.516 106.412H277.361V150.179H289.518V126.865L308.827 150.179H318.982V106.412H306.825V129.726ZM367.182 111.99C364.894 109.988 362.319 108.272 359.459 107.271C353.166 104.982 346.443 104.982 340.15 107.271C334.429 109.273 329.709 113.707 327.278 119.285C325.99 122.145 325.418 125.149 325.418 128.296C325.418 131.442 325.99 134.446 327.278 137.306C328.422 140.024 330.138 142.455 332.427 144.601C334.715 146.746 337.29 148.319 340.15 149.321C346.443 151.609 353.166 151.609 359.459 149.321C362.319 148.319 364.894 146.603 367.182 144.601C369.328 142.598 371.044 140.167 372.331 137.449C373.619 134.589 374.191 131.442 374.191 128.296C374.191 125.149 373.619 122.145 372.331 119.285C371.044 116.424 369.328 113.993 367.182 111.99ZM360.746 133.445C360.174 134.875 359.316 136.305 358.172 137.449C357.17 138.594 355.883 139.452 354.453 140.024C351.449 141.168 348.16 141.168 345.156 140.024C343.726 139.452 342.439 138.594 341.437 137.449C340.293 136.305 339.435 135.018 338.863 133.445C337.719 130.155 337.719 126.436 338.863 123.147C339.435 121.716 340.293 120.286 341.437 119.142C342.439 117.998 343.869 117.139 345.156 116.567C348.16 115.423 351.449 115.423 354.453 116.567C355.883 117.139 357.17 117.998 358.172 119.142C359.316 120.286 360.031 121.573 360.746 123.147C361.89 126.436 361.89 130.155 360.746 133.445ZM375.907 106.412V116.281H389.352V150.179H401.652V116.281H415.096V106.41Line truncated
+{"light":{"not-found":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"600\" fill=\"none\" viewBox=\"0 0 800 600\"><path d=\"M623.916 531.347C623.916 534.35 522.081 536.782 396.36 536.782C270.639 536.782 168.803 534.35 168.803 531.347C168.803 528.343 270.639 525.912 396.36 525.912C522.081 525.912 623.916 528.343 623.916 531.347Z\" fill=\"#A7AAB3\"/><path d=\"M149.638 288.057C149.638 327.819 191.688 356.567 210.138 388.606C229.304 421.645 233.881 472.277 266.92 491.299C298.958 509.893 344.584 489.154 384.346 489.154C424.107 489.154 469.733 509.893 501.771 491.299C534.811 472.134 539.387 421.645 558.553 388.606C577.147 356.567 619.054 327.676 619.054 288.057C619.054 248.439 577.004 219.547 558.553 187.509C539.53 154.47 534.811 103.838 501.771 84.8153C469.733 66.2217 424.107 86.9607 384.346 86.9607C344.584 86.9607 298.958 66.2217 266.92 84.8153C233.881 103.981 229.304 154.47 210.138 187.509C191.545 219.547 149.638 248.439 149.638 288.057Z\" fill=\"rgba(0, 20, 80, .04)\"/><path d=\"M510.067 239.857L504.918 266.317H445.132L450.138 240.858L445.132 239.857L388.208 529.201L393.213 530.203L398.505 503.17H458.291L453.142 529.201L458.148 530.203L515.073 240.715L510.067 239.857ZM503.917 271.323L493.476 324.243H433.69L444.131 271.323H503.917ZM422.248 382.169L432.689 329.249H492.475L482.034 382.169H422.248ZM481.175 387.318L470.734 440.238H410.949L421.39 387.318H481.175ZM399.507 498.164L409.948 445.244H469.733L459.292 498.164H399.507Z\" fill=\"#232B41\"/><path d=\"M556.694 450.822L548.112 406.77L515.216 239.714L510.067 240.715L515.073 266.031H455.43L450.281 239.714L445.132 240.715L502.057 530.203L507.206 529.201L502.057 503.313H561.7L566.992 530.203L572.141 529.201L556.694 450.822ZM456.431 271.466H516.074L526.372 324.243H466.729L456.431 271.466ZM467.874 329.392H527.516L537.814 382.169H478.172L467.874 329.392ZM479.316 387.461H538.958L544.393 414.922L549.399 440.095H489.614L479.316 387.461ZM501.056 498.164L490.758 445.387H550.401L550.687 446.818L551.259 449.821L560.699 498.164H501.056Z\" fill=\"#A7AAB3\"/><path d=\"M556.694 450.823L551.116 449.821L550.544 446.818L550.257 445.387H526.658C527.945 443.099 529.948 441.24 532.379 440.095H549.113L544.107 414.923L547.826 406.913L556.694 450.823Z\" fill=\"black\" opacity=\"0.22\"/><path d=\"M263.201 69.7974H529.948C538.529 69.7974 545.394 76.6627 545.394 85.2443V237.855C545.394 246.436 538.529 253.302 529.948 253.302H263.201C254.62 253.302 247.754 246.436 247.754 237.855V85.3874C247.754 76.8057 254.62 69.7974 263.201 69.7974Z\" fill=\"white\"/><path d=\"M529.947 66.2217H263.201C252.617 66.2217 244.036 74.8033 244.036 85.3874V237.998C244.036 248.582 252.617 257.163 263.201 257.163H529.947C540.531 257.163 549.113 248.582 549.113 237.998V85.3874C549.113 74.8033 540.531 66.2217 529.947 66.2217ZM541.819 237.855C541.819 242.431 539.101 246.722 534.953 248.582C533.38 249.297 531.664 249.726 529.947 249.726H263.201C256.622 249.726 251.33 244.434 251.33 237.855V85.3874C251.33 78.8081 256.622 73.5161 263.201 73.5161H529.947C536.527 73.5161 541.819 78.8081 541.819 85.3874V237.855Z\" fill=\"#232B41\"/><path d=\"M507.206 257.163H458.577C455.716 255.018 453.142 252.587 450.71 249.869C450.424 249.583 450.138 249.154 449.852 248.868C444.846 243.29 441.557 236.424 440.269 229.13C440.126 228.558 440.126 227.843 439.983 227.414C440.842 224.124 443.845 221.693 447.135 221.55C449.28 221.693 451.283 222.694 452.57 224.41C454.715 228.701 457.433 232.563 460.722 235.852C465.299 240.429 470.019 243.147 476.455 246.007C486.324 250.584 496.622 254.303 507.206 257.163Z\" fill=\"black\" opacity=\"0.19\"/><path d=\"M306.825 129.726L287.516 106.412H277.361V150.179H289.518V126.865L308.827 150.179H318.982V106.412H306.825V129.726ZM367.182 111.99C364.894 109.988 362.319 108.272 359.459 107.271C353.166 104.982 346.443 104.982 340.15 107.271C334.429 109.273 329.709 113.707 327.278 119.285C325.99 122.145 325.418 125.149 325.418 128.296C325.418 131.442 325.99 134.446 327.278 137.306C328.422 140.024 330.138 142.455 332.427 144.601C334.715 146.746 337.29 148.319 340.15 149.321C346.443 151.609 353.166 151.609 359.459 149.321C362.319 148.319 364.894 146.603 367.182 144.601C369.328 142.598 371.044 140.167 372.331 137.449C373.619 134.589 374.191 131.442 374.191 128.296C374.191 125.149 373.619 122.145 372.331 119.285C371.044 116.424 369.328 113.993 367.182 111.99ZM360.746 133.445C360.174 134.875 359.316 136.305 358.172 137.449C357.17 138.594 355.883 139.452 354.453 140.024C351.449 141.168 348.16 141.168 345.156 140.024C343.726 139.452 342.439 138.594 341.437 137.449C340.293 136.305 339.435 135.018 338.863 133.445C337.719 130.155 337.719 126.436 338.863 123.147C339.435 121.716 340.293 120.286 341.437 119.142C342.439 117.998 343.869 117.139 345.156 116.567C348.16 115.423 351.449 115.423 354.453 116.567C355.883 117.139 357.17 117.998 358.172 119.142C359.316 120.286 360.031 121.573 360.746 123.147C361.89 126.436 361.89 130.155 360.746 133.445ZM375.907 106.412V116.281H389.352V150.179H401.652V116.281H415.096V106.41Line truncated