Monorepo for Tangled tangled.org

docs: use google search query as a search bar

Signed-off-by: oppiliappan <me@oppi.li>

oppi.li f26c1925 6dc86ffb

verified
Changed files
+14 -6
docs
+7
docs/search.html
··· 1 + <form action="https://google.com/search" role="search" aria-label="Sitewide" class="w-full"> 2 + <input type="hidden" name="q" value="+[inurl:https://docs.tangled.org]"> 3 + <label> 4 + <span style="display:none;">Search</span> 5 + <input type="text" name="q" placeholder="Search docs ..." class="w-full font-normal"> 6 + </label> 7 + </form>
+7 -6
docs/template.html
··· 37 37 <link rel="preload" href="/static/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin /> 38 38 39 39 </head> 40 - <body class="bg-white dark:bg-gray-900 min-h-screen flex flex-col min-h-screen"> 40 + <body class="bg-white dark:bg-gray-900 flex flex-col min-h-svh"> 41 41 $for(include-before)$ 42 42 $include-before$ 43 43 $endfor$ ··· 60 60 id="mobile-toc-popover" 61 61 popover 62 62 class="mobile-toc-popover 63 - bg-white dark:bg-gray-800 64 - border-r border-gray-200 dark:border-gray-700 65 - h-full overflow-y-auto 63 + bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 64 + h-full overflow-y-auto shadow-sm 66 65 px-6 py-4 fixed inset-x-0 top-0 w-fit max-w-4/5 m-0" 67 66 > 68 67 <div class="flex flex-col min-h-full"> 69 - <div class="flex-1"> 68 + <div class="flex-1 space-y-4"> 70 69 <button 71 70 type="button" 72 71 popovertarget="mobile-toc-popover" ··· 75 74 ${ x.svg() } 76 75 $if(toc-title)$$toc-title$$else$Table of Contents$endif$ 77 76 </button> 77 + ${ search.html() } 78 78 ${ table-of-contents:toc.html() } 79 79 </div> 80 80 ${ single-page:mode.html() } ··· 85 85 <nav 86 86 id="$idprefix$TOC" 87 87 role="doc-toc" 88 - class="hidden md:flex md:flex-col fixed left-0 top-0 w-80 h-screen 88 + class="hidden md:flex md:flex-col gap-4 fixed left-0 top-0 w-80 h-screen 89 89 bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 90 90 p-4 z-50 overflow-y-auto"> 91 + ${ search.html() } 91 92 <div class="flex-1"> 92 93 $if(toc-title)$ 93 94 <h2 id="$idprefix$toc-title" class="text-lg font-semibold mb-4 text-gray-900">$toc-title$</h2>