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                         <h2>Simple &amp; Free <br>Wiki Software</h2>
 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                     </div>
 14                     <div class="col-md-8 screenshot-container-parent">
 15                         <div class="screenshot-container">
 16                                 <div class="window-row">
 17                                         <div class="window-option red"></div>
 18                                         <div class="window-option" style="background-color: orange;"></div>
 19                                         <div class="window-option"  style="background-color: green;"></div>
 20                                 </div>
 21                                 <img class="screenshot" src="images/bookstack-hero-screenshot.jpg" alt="BookStack ScreenShot">
 22                         </div>
 23                     </div>
 24                 </div>
 25         </div>
 26 </div>
 27
 28
 29   <div class="container md-margin-top">
 30         <h2 id="features">Features</h2>
 31         <div class="row">
 32             <div class="col-sm-4">
 33                 <h4><span class="icon">{{partial "icon/code.svg"}}</span>Free &amp; Open Source</h4>
 34                 <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.
 35                 </p>
 36                 <p>
 37                     <a href="https://github.com/BookStackApp/BookStack">View the source here &raquo;</a>
 38                 </p>
 39             </div>
 40             <div class="col-sm-4" >
 41                 <h4><span class="icon">{{partial "icon/laptop_chromebook.svg"}}</span>Easy, Simple Interface</h4>
 42                 <p>
 43                     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:
 44                 </p>
 45                 <p>
 46                     <span class="icon book">{{partial "icon/book.svg"}}</span>Books &nbsp;&nbsp;<span class="icon chapter">{{partial "icon/collections_bookmark.svg"}}</span>Chapters&nbsp;&nbsp; <span class="icon page">{{partial "icon/description.svg"}}</span>Pages
 47                 </p>
 48             </div>
 49             <div class="col-sm-4" >
 50                 <h4><span class="icon">{{partial "icon/search.svg"}}</span>Searchable and Connected</h4>
 51                 <p>
 52                     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.
 53                 </p>
 54             </div>
 55         </div>
 56         <p>
 57             <br>
 58         </p>
 59         <div class="row">
 60             <div class="col-sm-4">
 61                 <h4><span class="icon">{{partial "icon/build.svg"}}</span>Configurable</h4>
 62                 <p>
 63                     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.
 64                 </p>
 65             </div>
 66             <div class="col-sm-4" >
 67                 <h4><span class="icon">{{partial "icon/storage.svg"}}</span>Simple Requirements</h4>
 68                 <p>
 69                     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.
 70                 </p>
 71             </div>
 72             <div class="col-sm-4" >
 73                 <h4><span class="icon">{{partial "icon/directions_boat.svg"}}</span>Powerful Features</h4>
 74                 <p>
 75                     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.
 76                 </p>
 77             </div>
 78         </div>
 79         <p>
 80             <br>
 81         </p>
 82         <div class="row">
 83             <div class="col-sm-4">
 84                 <h4><span class="icon">{{partial "icon/language.svg"}}</span>Multi-lingual</h4>
 85                 <p>
 86                     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 more.
 87                 </p>
 88             </div>
 89             <div class="col-sm-4" >
 90                 <h4><span class="icon">{{partial "icon/edit.svg"}}</span>Optional Markdown Editor</h4>
 91                 <p>
 92                    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.
 93                 </p>
 94             </div>
 95             <div class="col-sm-4" >
 96                 <h4><span class="icon">{{partial "icon/lock.svg"}}</span>Integrated Authentication</h4>
 97                 <p>
 98                         As well as the default email/password login social providers such as GitHub, Google, Slack, AzureAD and more can be used. Okta and LDAP options are available for enterprise environments.
 99                 </p>
 100             </div>
 101         </div>
 102     </div>
 103     <div class="shaded shaded-border md-margin-top padded-vertical large">
 104         <div class="container">
 105                 <div class="row">
 106                         <div class="col-sm-6">
 107                                 <h2 class="nomargin margin-bottom" id="demo">Try Out BookStack</h2>
 108                                 <p>
 109                                         You can try out BookStack right now by using the given details.
 110                                         <strong>The demo database &amp; image storage is automatically reset every half hour.</strong>
 111                                         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.
 112                                 </p>
 113                                         <div>
 114                                                 <strong>Actions Restricted In Demo</strong>
 115                                                 <ul>
 116                                                         <li>User deletion</li>
 117                                                         <li>User updates</li>
 118                                                         <li>Setting updates</li>
 119                                                 </ul>
 120                                         </div>
 121                         </div>
 122                         <div class="col-sm-6 text-center">
 123                                         <div class="demo-box text-left " >
 124                                                 <label>Demo site url</label> <br><a href="https://demo.bookstackapp.com" target="_blank">https://demo.bookstackapp.com</a> <br>
 125                                                 <label>Admin email</label> <br><input type="text" onclick="this.select();" value="admin@example.com" readonly="true"><br>
 126                                                 <label>Admin password</label> <br><input type="text" onclick="this.select();" value="password" readonly="true"> <br><br>
 127                                                 <a href="https://demo.bookstackapp.com/login?email=admin@example.com&password=password" class="button" target="_blank">Open demo site</a>
 128                                         </div>
 129                         </div>
 130                 </div>
 131         </div>
 132     </div>
 133
 134         <div class="padded-vertical large">
 135                 <div class="container">
 136                         <h2 class="nomargin margin-bottom" id="screenshots">Screenshots</h2>
 137                         <div class="my-gallery">
 138                                 <div class="row">
 139                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 140                                                 <h4>Page View</h4>
 141                                                 <p>How core content is viewed in BookStack</p>
 142                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 143                                                     <a href="images/screenshots/page-view.png" data-size="1666x910">
 144                                                         <img src="images/screenshots/thumb_page-view.png" alt="Page View" loading="lazy">
 145                                                     </a>
 146                                                 </figure>
 147                                         </div>
 148                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 149                                                 <h4>Page Editor</h4>
 150                                                 <p>The WYSIWYG interface for editing pages</p>
 151                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 152                                                     <a href="images/screenshots/page-edit.png" data-size="1666x910">
 153                                                         <img src="images/screenshots/thumb_page-edit.png" alt="Page Editing" loading="lazy">
 154                                                     </a>
 155                                                 </figure>
 156                                         </div>
 157                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 158                                                 <h4>Image Manager</h4>
 159                                                 <p>How images are uploaded and managed</p>
 160                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 161                                                     <a href="images/screenshots/image-manager.png" data-size="1666x910">
 162                                                         <img src="images/screenshots/thumb_image-manager.png" alt="Image Manager" loading="lazy">
 163                                                     </a>
 164                                                 </figure>
 165                                         </div>
 166                                 </div>
 167
 168                                 <br>
 169
 170                                 <div class="row">
 171                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 172                                                 <h4>All Books Overview</h4>
 173                                                 <p>An overview of the top-level categorisation</p>
 174                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 175                                                     <a href="images/screenshots/books-view.png" data-size="1666x910">
 176                                                         <img src="images/screenshots/thumb_books-view.png" alt="View of all books" loading="lazy">
 177                                                     </a>
 178                                                 </figure>
 179                                         </div>
 180                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 181                                                 <h4>Book Overview</h4>
 182                                                 <p>A view of the main content container: A book</p>
 183                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 184                                                     <a href="images/screenshots/book-overview.png" data-size="1666x910">
 185                                                         <img src="images/screenshots/thumb_book-overview.png" alt="Book Overview" loading="lazy">
 186                                                     </a>
 187                                                 </figure>
 188                                         </div>
 189                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 190                                                 <h4>Book Sorting</h4>
 191                                                 <p>How created content can be sorted within a book</p>
 192                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 193                                                     <a href="images/screenshots/book-sorting.png" data-size="1666x910">
 194                                                         <img src="images/screenshots/thumb_book-sorting.png" alt="Book Content Sorting View" loading="lazy">
 195                                                     </a>
 196                                                 </figure>
 197                                         </div>
 198                                 </div>
 199
 200                                 <br>
 201
 202                                 <div class="row">
 203                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 204                                                 <h4>Global Search</h4>
 205                                                 <p>The main interface for searching created content</p>
 206                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 207                                                     <a href="images/screenshots/search.png" data-size="1666x910">
 208                                                         <img src="images/screenshots/thumb_search.png" alt="Searching all content" loading="lazy">
 209                                                     </a>
 210                                                 </figure>
 211                                         </div>
 212                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 213                                                 <h4>App Settings</h4>
 214                                                 <p>A view the of application system settings</p>
 215                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 216                                                     <a href="images/screenshots/settings-view.png" data-size="1666x910">
 217                                                         <img src="images/screenshots/thumb_settings-view.png" alt="Settings View" loading="lazy">
 218                                                     </a>
 219                                                 </figure>
 220                                         </div>
 221                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 222                                                 <h4>Profile Page</h4>
 223                                                 <p>A user profile page, showing their activity and content</p>
 224                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 225                                                     <a href="images/screenshots/profile-page.png" data-size="1666x910">
 226                                                         <img src="images/screenshots/thumb_profile-page.png" alt="Profile Editing Screen" loading="lazy">
 227                                                     </a>
 228                                                 </figure>
 229                                         </div>
 230                                 </div>
 231
 232                         </div>
 233                 </div>
 234         </div>
 235
 236
 237     <div class="shaded shaded-border md-margin-top padded-vertical large">
 238         <div class="container">
 239             <h2>Latest From The Blog</h2>
 240
 241                         {{ range first 4 ( where .Site.Pages "Section" "blog") }}
 242                                 <div class="blogpost-card">
 243                                         <a href="{{.Permalink}}">
 244                                                 {{ if .Params.image }}
 245                                                         <div class="image" style="background-image: url({{.Params.image}});"></div>
 246                                                 {{ end }}
 247                                                 <div class="text">{{ .Title }}</div>
 248                                         </a>
 249                                 </div>
 250                         {{ end }}
 251
 252                         <div class="clearfix"></div>
 253
 254             <div class="padded-top"><a class="button" href="/blog">Read the blog &raquo;</a></div>
 255         </div>
 256     </div>
 257
 258     <!-- Root element of PhotoSwipe. Must have class pswp. -->
 259         <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
 260             <div class="pswp__bg"></div>
 261             <div class="pswp__scroll-wrap">
 262                 <div class="pswp__container">
 263                     <div class="pswp__item"></div>
 264                     <div class="pswp__item"></div>
 265                     <div class="pswp__item"></div>
 266                 </div>
 267                 <div class="pswp__ui pswp__ui--hidden">
 268                     <div class="pswp__top-bar">
 269                         <div class="pswp__counter"></div>
 270                         <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
 271                         <button class="pswp__button pswp__button--share" title="Share"></button>
 272                         <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
 273                         <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
 274                         <div class="pswp__preloader">
 275                             <div class="pswp__preloader__icn">
 276                               <div class="pswp__preloader__cut">
 277                                 <div class="pswp__preloader__donut"></div>
 278                               </div>
 279                             </div>
 280                         </div>
 281                     </div>
 282                     <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
 283                         <div class="pswp__share-tooltip"></div>
 284                     </div>
 285                     <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
 286                     </button>
 287                     <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
 288                     </button>
 289                     <div class="pswp__caption">
 290                         <div class="pswp__caption__center"></div>
 291                     </div>
 292                 </div>
 293             </div>
 294         </div>
 295
 296         <script async src="libs/photoswipe.min.js"></script>
 297
 298 {{ partial "footer.html" . }}