github.com/paganotoni/doco@v1.0.7/internal/template.html (about) 1 <!DOCTYPE html> 2 <html lang="en" class="h-full"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 7 <title>{{.SiteConfig.Name}} - {{.Title}} </title> 8 <meta name="description" content="{{.Description}}"> 9 <meta name="Keywords" content="{{.Keywords}}"> 10 11 <link rel="icon" type="image/png" href="{{.SiteConfig.Favicon}}" /> 12 <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100" rel="stylesheet" /> 13 14 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> 15 <script src="https://cdn.tailwindcss.com"></script> 16 17 <!-- Style for the content of the page --> 18 <style type="text/tailwindcss"> 19 {{.Style}} 20 </style> 21 22 </head> 23 <body class="bg-gray-50 max-w-[1400px] mx-auto flex flex-col min-h-full"> 24 <header class="sticky top-0 z-40 w-full px-3 border-gray-200 bg-gray-50 border-b flex flex-row gap-8 py-4 items-center"> 25 26 {{ if not (eq .SiteConfig.Logo.Link "") }} 27 <a href="{{.SiteConfig.Logo.Link}}" class="font-bold text-xl flex flex-row gap-1 items-center"> 28 <img src="{{.SiteConfig.Logo.Src}}" class="h-8" /> 29 </a> 30 {{ else }} 31 <a href="/" class="font-bold text-xl flex flex-row gap-1 items-center"> 32 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> 33 <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" /> 34 </svg> 35 Doco 36 </a> 37 {{end}} 38 39 <div class="flex items-center gap-8"> 40 {{ if not (eq .SiteConfig.Announcement.Text "") }} 41 <a href="{{ .SiteConfig.Announcement.Link }}" class="hidden md:flex rounded-full p-3 py-1.5 bg-white border text-sm flex flex-row items-center gap-2 hover:border-gray-300"> 42 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" class="w-5 h-5"> 43 <path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46" /> 44 </svg> 45 46 <span>{{ .SiteConfig.Announcement.Text }}</span> 47 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" class="w-3 h-3"> 48 <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /> 49 </svg> 50 </a> 51 {{ end }} 52 </div> 53 <nav class="flex-grow flex justify-end"> 54 <ul class="flex flex-row gap-7 font-medium hidden lg:flex border-r "> 55 {{ range .SiteConfig.ExternalLinks }} 56 <li> 57 <a href="{{.Link}}" class="hover:underline flex flex-row gap-1 items-center mr-8"> 58 {{.Text}} 59 60 </a> 61 </li> 62 {{ end }} 63 </ul> 64 </nav> 65 66 <div class="md:hidden flex flex-row gap-4 items-center"> 67 <span class="search-button"> 68 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> 69 <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /> 70 </svg> 71 </span> 72 <span class="toggle-mobile-nav"> 73 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-8 h-8"> 74 <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /> 75 </svg> 76 </span> 77 </div> 78 79 {{ if not (eq .SiteConfig.Github "") }} 80 <div class="flex-row gap-10 hidden md:flex"> 81 <div class="flex flex-row items-center justify-items-end"> 82 <a href="{{.SiteConfig.Github}}" class="rounded-full hover:bg-gray-200 p-2.5"> 83 <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 fill-slate-900"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.463 2 11.97c0 4.404 2.865 8.14 6.839 9.458.5.092.682-.216.682-.48 0-.236-.008-.864-.013-1.695-2.782.602-3.369-1.337-3.369-1.337-.454-1.151-1.11-1.458-1.11-1.458-.908-.618.069-.606.069-.606 1.003.07 1.531 1.027 1.531 1.027.892 1.524 2.341 1.084 2.91.828.092-.643.35-1.083.636-1.332-2.22-.251-4.555-1.107-4.555-4.927 0-1.088.39-1.979 1.029-2.675-.103-.252-.446-1.266.098-2.638 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0 1 12 6.82c.85.004 1.705.114 2.504.336 1.909-1.29 2.747-1.022 2.747-1.022.546 1.372.202 2.386.1 2.638.64.696 1.028 1.587 1.028 2.675 0 3.83-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.332-.012 2.407-.012 2.734 0 .267.18.577.688.48 3.97-1.32 6.833-5.054 6.833-9.458C22 6.463 17.522 2 12 2Z"></path></svg> 84 </a> 85 </div> 86 </div> 87 {{ end }} 88 </header> 89 90 <section class="flex-grow flex flex-row px-3"> 91 <aside class="hidden lg:block lg:fixed min-w-[19rem] pr-5 flex flex-col gap-1 pt-6"> 92 <button class="search-button border min-w-[17rem] rounded-lg p-2 px-3 mb-6 bg-gray-50 text-left flex flex-row hover:border-gray-400 hover:bg-white items-center"> 93 <svg width="24" height="24" fill="none" aria-hidden="true" class="mr-3 flex-none"> 94 <path d="m19 19-3.5-3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> 95 </svg> 96 Quick Search 97 <span class="ml-auto pl-3 flex-none text-sm font-semibold">⌘K</span> 98 </button> 99 100 <div class="max-h-[calc(100vh-180px)] overflow-y-scroll pb-10"> 101 102 <ul class="flex flex-col mb-8"> 103 {{range .SiteConfig.QuickLinks}} 104 <li> 105 <a href="{{.Link}}" class="flex flex-row gap-2 p-1.5 rounded-lg hover:bg-gray-200/80"> 106 <span class="material-symbols-outlined">{{.Icon}}</span> 107 {{.Text}} 108 </a> 109 </li> 110 {{end}} 111 112 </ul> 113 114 <nav id="desktop-navigation"> 115 {{.Navigation}} 116 </nav> 117 </div> 118 </aside> 119 120 <section class="flex-grow flex flex-col lg:ml-[19rem]"> 121 <main class="flex-grow lg:px-5 px-5 py-5 text-md lg:text-lg pb-10"> 122 {{ if not (eq .SectionName "") }} 123 <span class="text-sm">{{ .SectionName }}</span> 124 {{ end }} 125 126 <h1 id="welcome" class="font-bold text-4xl mb-2"> 127 {{ .Title }} 128 </h1> 129 130 <div id="htmlcontainer" class="max-w-5xl"> 131 {{ .Content }} 132 </div> 133 134 <div class="grid grid-cols-2 gap-2 justify-between text-gray-600 pt-8"> 135 <div> 136 {{if not (eq .Prev.Link "")}} 137 <a class="p-3.5 px-5 flex border rounded-lg hover:shadow" href="/{{.Prev.Link}}"> 138 <span class="flex flex-col"> 139 <span class="text-base">Previous </span> 140 <span class="text-lg flex flex-row gap-3 font-bold"> 141 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> 142 <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" /> 143 </svg> 144 {{ .Prev.Title }} 145 </span> 146 </span> 147 </a> 148 149 {{end}} 150 </div> 151 <div> 152 {{if not (eq .Next.Link "")}} 153 <a class="p-3.5 px-5 border rounded-lg flex flex-row flex-row-reverse hover:shadow" href="/{{.Next.Link}}"> 154 <span class="flex flex-col text-right"> 155 <span class="text-base">Next </span> 156 <span class="text-lg flex flex-row gap-2 font-bold"> 157 {{ .Next.Title }} 158 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> 159 <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /> 160 </svg> 161 </span> 162 </span> 163 </a> 164 {{end}} 165 </div> 166 </div> 167 </main> 168 169 170 <footer class="px-5 py-8 items-center flex flex-row text-gray-400 border-t"> 171 <span class="flex-grow text-sm" id="copy">{{.SiteConfig.Copy}}</span> 172 <a href="https://doco.sh" class="text-sm underline flex flex-row items-center gap-1" target="_blank"> 173 Powered by <strong class="font-bold">Doco</strong> 174 175 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> 176 <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> 177 </svg> 178 </a> 179 </footer> 180 </section> 181 </section> 182 183 <div id="search-palette" class="hidden fixed inset-0 z-[100] overflow-y-auto p-4 sm:p-6 md:p-20" role="dialog" aria-modal="true"> 184 <div id="search-overlay" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div> 185 <div class="z-[100] mx-auto max-w-2xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all"> 186 <div class="relative"> 187 <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 188 <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> 189 </svg> 190 <input id="search-input" type="text" class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-800 placeholder-gray-400 focus:ring-0 outline-none sm:text-sm" placeholder=""> 191 <button id="close-search" class="bg-gray-200 h-8 w-8 text-xs text-gray-600 rounded-md inline-block absolute right-2 top-2">esc</button> 192 </div> 193 194 <ul id="search-quick-actions" class="max-h-80 scroll-py-2 divide-y divide-gray-100 overflow-y-auto"> 195 <li class="p-2"> 196 <h2 class="sr-only">Quick actions</h2> 197 <ul class="text-sm text-gray-700"> 198 {{range .SiteConfig.QuickLinks}} 199 <li class="group cursor-default select-none items-center rounded-md px-3 py-2"> 200 <a href="{{.Link}}" class="flex flex-row items-center group hover:text-blue-500"> 201 <span class="material-symbols-outlined">{{.Icon}}</span> 202 <span class="ml-3 flex-auto truncate">{{.Text}}</span> 203 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg> 204 </a> 205 </li> 206 {{end}} 207 </ul> 208 </li> 209 </ul> 210 <ul id="search-results" class="hidden max-h-96 overflow-y-auto p-2 text-sm text-gray-700"></ul> 211 <div id="search-no-results" class="hidden py-14 px-6 text-center sm:px-14"> 212 <svg class="mx-auto h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> 213 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path> 214 </svg> 215 <p class="mt-4 text-sm text-gray-900"></p> 216 </div> 217 </div> 218 </div> 219 220 <nav id="mobile-menu" class="hidden overflow-scroll bg-gray-400/90 z-50 fixed right-0 left-0 top-0 bottom-0 h-screen w-screen"> 221 <span class="toggle-mobile-nav fixed top-10 right-10" > 222 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6"> 223 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> 224 </svg> 225 </span> 226 <div class="bg-white max-w-[calc(100vw-100px)] py-6 px-4"> 227 <ul class="quicklinks flex flex-col mb-8"> 228 {{range .SiteConfig.QuickLinks}} 229 <li> 230 <a href="{{.Link}}" class="flex flex-row gap-2 p-1.5 rounded-lg hover:bg-gray-200/80"> 231 <span class="material-symbols-outlined">{{.Icon}}</span> 232 {{.Text}} 233 </a> 234 </li> 235 {{end}} 236 </ul> 237 {{.Navigation}} 238 </div> 239 </nav> 240 241 <script id="search-result-template" type="text/x-js-template"> 242 <li class="text-gray-700 group cursor-default select-none items-center rounded-md px-3 py-2 hover:text-blue-500"> 243 <a class="flex items-center" href="/${link}"> 244 <svg class="h-6 w-6 flex-none" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg> 245 <span class="ml-3 flex-grow flex-auto truncate">${title}</span> 246 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg> 247 <span class="ml-3 hidden flex-none text-indigo-100">Jump to...</span> 248 </a> 249 </li> 250 </script> 251 252 <!-- Zoomed image overlay --> 253 <div id="zoomed-image-overlay" class="hidden fixed bg-white/90 top-0 right-0 w-full h-full z-50 text-center px-[15%] py-[5%] cursor-zoom-out"> 254 <div class="w-full"> 255 <img src="https://placehold.co/600x400" alt="image" class="w-full bg-white rounded-md place-content-center shadow-xl"> 256 </div> 257 </div> 258 259 <script src="https://cdn.jsdelivr.net/npm/fuse.js@7.0.0"></script> 260 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> 261 <script src="/doco.js"></script> 262 </body> 263 </html>