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>