BookStack Code Mirror - website/blob - themes/bookstack/layouts/index.html

   1 {{ partial "header.html" . }}
   2 <div class="header">
   3         <div class="container">
   4                 <div class="row hero">
   5                     <div class="col-md-4 spaced">
   6                         <h1>Simple &amp; Free <br>Wiki Software</h1>
   7                         <p>BookStack is a simple, self-hosted, easy-to-use platform for organising and storing information.</p>
   8                         <p>
   9                           <a href="https://github.com/BookStackApp/BookStack">GitHub</a> &nbsp;-&nbsp;
  10                           <a href="https://demo.bookstackapp.com">Demo</a> &nbsp;-&nbsp;
  11                           <a href="/docs/admin/installation">Install</a>
  12                         </p>
  13
  14                                 <p class="nomargin">
  15                                         <br>
  16                                         Latest Blog Post: <br>
  17                                         {{ range first 1 ( where .Site.RegularPages "Section" "blog") }}
  18                                                         <a href="{{.Permalink}}">{{ .Title }}</a>
  19                                         {{ end }}
  20                                 </p>
  21                     </div>
  22                     <div class="col-md-8 screenshot-container-parent">
  23                         <div class="screenshot-container">
  24                                 <div class="window-row">
  25                                         <div class="window-option red"></div>
  26                                         <div class="window-option" style="background-color: orange;"></div>
  27                                         <div class="window-option"  style="background-color: green;"></div>
  28                                 </div>
  29                                 <img class="screenshot" src="images/bookstack-hero-screenshot.webp" alt="BookStack ScreenShot">
  30                         </div>
  31                     </div>
  32                 </div>
  33         </div>
  34 </div>
  35
  36
  37   <div class="container md-margin-top">
  38         <h2 id="features" class="nomargin margin-bottom">Features</h2>
  39         <div class="row">
  40             <div class="col-sm-4">
  41                 <h4><span class="icon" aria-hidden="true">{{partial "icon/code.svg"}}</span>Free &amp; Open Source</h4>
  42                 <p>BookStack is fully free and open, MIT licensed. The source is available on GitHub. There is no cost to downloading and installing your own instance of BookStack.
  43                 </p>
  44                 <p>
  45                     <a href="https://github.com/BookStackApp/BookStack">View the source here &raquo;</a>
  46                 </p>
  47             </div>
  48             <div class="col-sm-4" >
  49                 <h4><span class="icon" aria-hidden="true">{{partial "icon/laptop_chromebook.svg"}}</span>Easy, Simple Interface</h4>
  50                 <p>
  51                     Simplicity has been the top priority when building BookStack. The page editor has a simple WYSIWYG interface and all content is broken into three simple real world groups:
  52                 </p>
  53                 <p>
  54                                         <span class="icon book" aria-hidden="true">{{partial "icon/book.svg"}}</span>Books
  55                                         &nbsp;&nbsp;<span class="icon chapter" aria-hidden="true">{{partial "icon/collections_bookmark.svg"}}</span>Chapters&nbsp;&nbsp;
  56                                         <span class="icon page" aria-hidden="true">{{partial "icon/description.svg"}}</span>Pages
  57                 </p>
  58             </div>
  59             <div class="col-sm-4" >
  60                 <h4><span class="icon" aria-hidden="true">{{partial "icon/search.svg"}}</span>Searchable and Connected</h4>
  61                 <p>
  62                     The content in BookStack is fully searchable. You are able to search at book level or across all books, chapters &amp; pages. The ability to link directly to any paragraph allows you to keep your documentation connected.
  63                 </p>
  64             </div>
  65         </div>
  66         <p>
  67             <br>
  68         </p>
  69         <div class="row">
  70             <div class="col-sm-4">
  71                 <h4><span class="icon" aria-hidden="true">{{partial "icon/build.svg"}}</span>Configurable</h4>
  72                 <p>
  73                     Configuration options allow you to set-up BookStack to suit your use case. You can change the name, logo and registration options. You can also change whether the whole system is publicly viewable or not.
  74                 </p>
  75             </div>
  76             <div class="col-sm-4" >
  77                 <h4><span class="icon" aria-hidden="true">{{partial "icon/storage.svg"}}</span>Simple Requirements</h4>
  78                 <p>
  79                     BookStack is built using PHP, on top of the Laravel framework and it uses MySQL to store data. Performance has been kept in mind and BookStack can run happily on a $5 Digital Ocean VPS.
  80                 </p>
  81             </div>
  82             <div class="col-sm-4">
  83                 <h4><span class="icon" aria-hidden="true">{{partial "icon/drawing.svg"}}</span>Built-In diagrams.net</h4>
  84                 <p>
  85                     The page editor within BookStack has <a href="https://www.diagrams.net/" target="_blank">diagrams.net</a>
  86                     drawing capability built-in, allowing the quick and easy creation of diagrams within your documentation.
  87                 </p>
  88             </div>
  89         </div>
  90         <p>
  91             <br>
  92         </p>
  93         <div class="row">
  94             <div class="col-sm-4">
  95                 <h4><span class="icon" aria-hidden="true">{{partial "icon/language.svg"}}</span>Multi-Lingual</h4>
  96                 <p>
  97                     BookStack users can set their preferred language. Thanks to great community contributors, current languages built into BookStack include EN, FR, DE, ES, IT, JA, NL, PL, RU and <a href="https://crowdin.com/project/bookstack" target="_blank">many more</a>.
  98                 </p>
  99             </div>
 100             <div class="col-sm-4" >
 101                 <h4><span class="icon" aria-hidden="true">{{partial "icon/edit.svg"}}</span>Optional Markdown Editor</h4>
 102                 <p>
 103                    If you prefer to write in Markdown then BookStack supports you. A markdown editor is provided and includes a live-preview as you write your documentation.
 104                 </p>
 105             </div>
 106             <div class="col-sm-4" >
 107                 <h4><span class="icon" aria-hidden="true">{{partial "icon/lock.svg"}}</span>Integrated Authentication</h4>
 108                 <p>
 109                         As well as the default email/password login social providers such as GitHub, Google, Slack, AzureAD and more can be used. Okta, SAML2 and LDAP options are available for enterprise environments.
 110                 </p>
 111             </div>
 112         </div>
 113         <p>
 114             <br>
 115         </p>
 116         <div class="row">
 117                 <div class="col-sm-4" >
 118                     <h4><span class="icon" aria-hidden="true">{{partial "icon/directions_boat.svg"}}</span>Powerful Features</h4>
 119                     <p>
 120                         On top of the powerful search and linking there is also cross-book sorting, page revisions and image management. A full role and permission system allow you to lock down content and actions as required.
 121                     </p>
 122                 </div>
 123             <div class="col-sm-4" >
 124                 <h4><span class="icon" aria-hidden="true">{{partial "icon/mfa.svg"}}</span>Multi-Factor Authentication</h4>
 125                 <p>
 126                         MFA is built in & can be enforced at a per-role level where desired.
 127                         MFA options include TOTP (Google/Microsoft Authenticator, Authy, etc...) and static backup codes.
 128                 </p>
 129             </div>
 130             <div class="col-sm-4" >
 131                 <h4><span class="icon" aria-hidden="true">{{partial "icon/dark-mode.svg"}}</span>Dark & Light Modes</h4>
 132                 <p>
 133                    BookStack provides its user interface in both a light theme and a dark theme, saving the eyes
 134                    of those that prefer to work in the shadows. This is configurable at a user level.
 135                 </p>
 136             </div>
 137         </div>
 138     </div>
 139
 140
 141         <div class="shaded-border md-margin-top">
 142                 <div class="container md-margin-top">
 143                         <div class="row">
 144                                 <div class="col-sm-4">
 145                                         <h2 id="sponsors" class="nomargin margin-bottom">Project Sponsors</h2>
 146                                         <p>
 147                                                 Shown are our bronze, silver and gold project sponsors. <br>
 148                                                 Big thanks to these companies for supporting the project. <br>
 149                                                 Note: Listed services are not tested, vetted nor supported by the official BookStack project in any manner. <br>
 150                                                 <br>
 151                                                 <a target="_blank" href="https://github.com/sponsors/ssddanbrown">View all GitHub sponsors &raquo;</a>
 152                                                 <br>
 153                                                 <a href="/donate/">View donate & sponsor options &raquo;</a>
 154                                                 <p><br></p>
 155                                         </p>
 156                                 </div>
 157                                 <div class="col-sm-8 text-center">
 158                                         <!-- <p><br></p> -->
 159                                         <h5>Our Gold Sponsor</h5>
 160
 161                                         <div class="sponsor-list">
 162                                                 <a href="https://www.federated.computer/bookstack-wiki" target="_blank">
 163                                                         <img width="560" src="/images/sponsors/federated-computer.png" alt="Federated.computer logo">
 164                                                 </a>
 165                                         </div>
 166
 167                                         <p><br></p>
 168                                         <!-- <h5>Our Silver Sponsor</h5>
 169
 170                                         <div class="sponsor-list">
 171
 172                                         </div> -->
 173
 174                                         <!-- <p><br></p> -->
 175
 176                                 </div>
 177                         </div>
 178
 179                         <h5 class="text-center">Our Bronze Sponsors</h5>
 180
 181                         <div class="sponsor-list">
 182
 183                                 <a href="https://www.diagrams.net/" target="_blank">
 184                                         <img width="280" src="/images/sponsors/diagramsnet.png" alt="Diagrams.net logo">
 185                                 </a>
 186
 187                                 <a href="https://www.stellarhosted.com/bookstack/" target="_blank">
 188                                         <img width="280" src="/images/sponsors/stellarhosted.png" alt="Stellar Hosted logo">
 189                                 </a>
 190
 191                                 <a href="https://cloudabove.com/hosting" target="_blank">
 192                                         <img height="86" src="/images/sponsors/cloudabove.png" alt="Cloudabove logo">
 193                                 </a>
 194
 195                                 <a href="https://www.practicali.be" target="_blank">
 196                                         <img height="86" src="/images/sponsors/practicali.png" alt="Practicali logo">
 197                                 </a>
 198
 199                                 <a href="https://nws.netways.de/apps/bookstack/" target="_blank">
 200                                         <img width="280" src="/images/sponsors/netways.png" alt="NETWAYS Web Services logo">
 201                                 </a>
 202
 203                                 <a href="https://www.schroeck-consulting.de/" target="_blank">
 204                                         <img width="230" src="/images/sponsors/schroeck-consulting.png" alt="Schroeck IT Consulting logo">
 205                                 </a>
 206
 207                                 <a href="https://practinet.be/" target="_blank">
 208                                         <img height="86" src="/images/sponsors/practinet.png" alt="Practinet logo">
 209                                 </a>
 210
 211                                 <a href="https://route4me.com/" target="_blank">
 212                                         <img height="86" src="/images/sponsors/route4me.png" alt="Route4Me logo - Route Optimizer and Route Planner Software">
 213                                 </a>
 214
 215                                 <a href="https://phamos.eu" target="_blank">
 216                                         <img height="120" src="/images/sponsors/phamos.png" alt="phamos logo">
 217                                 </a>
 218
 219                                 <a href="https://sitespeak.ai/bookstack" target="_blank">
 220                                         <img width="280" src="/images/sponsors/sitespeak.png" alt="SiteSpeakAI logo">
 221                                 </a>
 222
 223                         </div>
 224
 225                 </div>
 226         </div>
 227
 228
 229
 230     <div class="shaded shaded-border md-margin-top padded-vertical large">
 231         <div class="container">
 232                 <div class="row">
 233                         <div class="col-sm-6">
 234                                 <h2 class="nomargin margin-bottom" id="demo">Try Out BookStack</h2>
 235                                 <p>
 236                                         You can try out BookStack right now by using the given details.
 237                                         <strong>The demo database &amp; image storage is automatically reset every half hour.</strong>
 238                                         Most standard actions are available using the provided admin login but some actions, listed below, have been restricted to keep the demo instance open &amp; available. That said, all options &amp; actions are at least visible to the demo admin user.
 239                                 </p>
 240                                         <div>
 241                                                 <strong>Actions Restricted In Demo</strong>
 242                                                 <ul>
 243                                                         <li>User deletion</li>
 244                                                         <li>User updates</li>
 245                                                         <li>Setting updates</li>
 246                                                 </ul>
 247                                         </div>
 248                         </div>
 249                         <div class="col-sm-6 text-center">
 250                                         <div class="demo-box text-left " >
 251                                                 <label>Demo site url</label> <br><a href="https://demo.bookstackapp.com" target="_blank">https://demo.bookstackapp.com</a> <br>
 252                                                 <label for="demo-email">Admin email</label> <br><input id="demo-email" type="text" onclick="this.select();" value="[email protected]" readonly="true"><br>
 253                                                 <label for="demo-password">Admin password</label> <br><input id="demo-password" type="text" onclick="this.select();" value="password" readonly="true"> <br><br>
 254                                                 <a href="https://demo.bookstackapp.com/[email protected]&password=password" class="button" target="_blank">Open demo site</a>
 255                                         </div>
 256                         </div>
 257                 </div>
 258         </div>
 259     </div>
 260
 261         <div class="padded-vertical large">
 262                 <div class="container">
 263                         <h2 class="nomargin margin-bottom" id="screenshots">Screenshots</h2>
 264                         <div class="my-gallery">
 265                                 <div class="row">
 266                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 267                                                 <h4>Page View</h4>
 268                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 269                                                         <figcaption>How core content is viewed in BookStack</figcaption>
 270                                                     <a href="images/screenshots/page-view.png" data-size="1666x910">
 271                                                         <img src="images/screenshots/thumb_page-view.png" alt="Page View" loading="lazy">
 272                                                     </a>
 273                                                 </figure>
 274                                         </div>
 275                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 276                                                 <h4>Page Editor</h4>
 277                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 278                                                         <figcaption>The WYSIWYG interface for editing pages</figcaption>
 279                                                     <a href="images/screenshots/page-edit.png" data-size="1666x910">
 280                                                         <img src="images/screenshots/thumb_page-edit.png" alt="Page Editing" loading="lazy">
 281                                                     </a>
 282                                                 </figure>
 283                                         </div>
 284                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 285                                                 <h4>Image Manager</h4>
 286                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 287                                                         <figcaption>How images are uploaded and managed</figcaption>
 288                                                     <a href="images/screenshots/image-manager.png" data-size="1666x910">
 289                                                         <img src="images/screenshots/thumb_image-manager.png" alt="Image Manager" loading="lazy">
 290                                                     </a>
 291                                                 </figure>
 292                                         </div>
 293                                 </div>
 294
 295                                 <br>
 296
 297                                 <div class="row">
 298                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 299                                                 <h4>All Books Overview</h4>
 300                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 301                                                         <figcaption>An overview of the top-level categorisation</figcaption>
 302                                                     <a href="images/screenshots/books-view.png" data-size="1666x910">
 303                                                         <img src="images/screenshots/thumb_books-view.png" alt="View of all books" loading="lazy">
 304                                                     </a>
 305                                                 </figure>
 306                                         </div>
 307                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 308                                                 <h4>Book Overview</h4>
 309                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 310                                                         <figcaption>A view of the main content container: A book</figcaption>
 311                                                     <a href="images/screenshots/book-overview.png" data-size="1666x910">
 312                                                         <img src="images/screenshots/thumb_book-overview.png" alt="Book Overview" loading="lazy">
 313                                                     </a>
 314                                                 </figure>
 315                                         </div>
 316                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 317                                                 <h4>Book Sorting</h4>
 318                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 319                                                         <figcaption>How created content can be sorted within a book</figcaption>
 320                                                     <a href="images/screenshots/book-sorting.png" data-size="1666x910">
 321                                                         <img src="images/screenshots/thumb_book-sorting.png" alt="Book Content Sorting View" loading="lazy">
 322                                                     </a>
 323                                                 </figure>
 324                                         </div>
 325                                 </div>
 326
 327                                 <br>
 328
 329                                 <div class="row">
 330                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 331                                                 <h4>Global Search</h4>
 332                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 333                                                         <figcaption>The main interface for searching created content</figcaption>
 334                                                     <a href="images/screenshots/search.png" data-size="1666x910">
 335                                                         <img src="images/screenshots/thumb_search.png" alt="Searching all content" loading="lazy">
 336                                                     </a>
 337                                                 </figure>
 338                                         </div>
 339                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 340                                                 <h4>App Settings</h4>
 341                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 342                                                         <figcaption>A view the of application system settings</figcaption>
 343                                                     <a href="images/screenshots/settings-view.png" data-size="1666x910">
 344                                                         <img src="images/screenshots/thumb_settings-view.png" alt="Settings View" loading="lazy">
 345                                                     </a>
 346                                                 </figure>
 347                                         </div>
 348                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 349                                                 <h4>Profile Page</h4>
 350                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 351                                                         <figcaption>A user profile page, showing their activity and content</figcaption>
 352                                                     <a href="images/screenshots/profile-page.png" data-size="1666x910">
 353                                                         <img src="images/screenshots/thumb_profile-page.png" alt="Profile Editing Screen" loading="lazy">
 354                                                     </a>
 355                                                 </figure>
 356                                         </div>
 357                                 </div>
 358
 359                         </div>
 360                 </div>
 361         </div>
 362
 363
 364     <div class="shaded shaded-border md-margin-top padded-vertical large" id="blog-list">
 365         <div class="container">
 366             <h2>Latest From The Blog</h2>
 367
 368                         <div class="blogpost-cards">
 369                                 {{ range first 4 ( where .Site.RegularPages "Section" "blog") }}
 370                                         <div class="blogpost-card">
 371                                                 <a href="{{.Permalink}}">
 372                                                         {{ if .Params.image }}
 373                                                             {{ $image := resources.Get .Params.image }}
 374                                                                 {{ $sized := $image.Resize "604x q90" }}
 375                                                                 <div class="image">
 376                                                                         <img src="{{$sized.RelPermalink}}" loading="lazy" width="302" height="160" alt="{{ .Title }}">
 377                                                                 </div>
 378                                                         {{ end }}
 379                                                         <div class="text">{{ .Title }}</div>
 380                                                 </a>
 381                                         </div>
 382                                 {{ end }}
 383                         </div>
 384
 385                         <div class="clearfix"></div>
 386
 387             <div class="padded-top"><a class="button" href="/blog">Read the blog &raquo;</a></div>
 388         </div>
 389     </div>
 390
 391     <!-- Root element of PhotoSwipe. Must have class pswp. -->
 392         <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
 393             <div class="pswp__bg"></div>
 394             <div class="pswp__scroll-wrap">
 395                 <div class="pswp__container">
 396                     <div class="pswp__item"></div>
 397                     <div class="pswp__item"></div>
 398                     <div class="pswp__item"></div>
 399                 </div>
 400                 <div class="pswp__ui pswp__ui--hidden">
 401                     <div class="pswp__top-bar">
 402                         <div class="pswp__counter"></div>
 403                         <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
 404                         <button class="pswp__button pswp__button--share" title="Share"></button>
 405                         <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
 406                         <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
 407                         <div class="pswp__preloader">
 408                             <div class="pswp__preloader__icn">
 409                               <div class="pswp__preloader__cut">
 410                                 <div class="pswp__preloader__donut"></div>
 411                               </div>
 412                             </div>
 413                         </div>
 414                     </div>
 415                     <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
 416                         <div class="pswp__share-tooltip"></div>
 417                     </div>
 418                     <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
 419                     </button>
 420                     <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
 421                     </button>
 422                     <div class="pswp__caption">
 423                         <div class="pswp__caption__center"></div>
 424                     </div>
 425                 </div>
 426             </div>
 427         </div>
 428
 429         <script async src="libs/photoswipe.min.js"></script>
 430
 431 {{ partial "footer.html" . }}