BookStack Code Mirror - website/blob - public/index.php

 1 <?php
 2
 3     // Get Blog articles
 4     $blogRss = 'https://www.bookstackapp.com/blog/rss/';
 5     $localRssLocation = 'dist/blog.rss';
 6     $cacheTimeSeconds = '86400';
 7
 8     if (file_exists($localRssLocation)) {
 9         $lastModified = filemtime($localRssLocation);
 10         if (time() - $lastModified >= $cacheTimeSeconds) {
 11             $contents = file_get_contents($blogRss);
 12             file_put_contents($localRssLocation, $contents);
 13         } else {
 14             $contents = file_get_contents($localRssLocation);
 15         }
 16     } else {
 17         $contents = file_get_contents($blogRss);
 18         file_put_contents($localRssLocation, $contents);
 19     }
 20
 21     $blogItems = [];
 22     $rss = simplexml_load_string($contents);
 23     if ($rss !== false) {
 24         foreach ($rss->channel->{'item'} as $item) {
 25             $blogItems[] = $item;
 26         }
 27     }
 28     $blogItems = array_slice($blogItems, 0, 3);
 29
 30     // Since this is only one page, import the styles to speed things up
 31     $styles = file_get_contents('dist/styles.min.css');
 32
 33     // SVG icon helper
 34     function icon($name) {
 35         echo(file_get_contents('icons/' . $name . '.svg'));
 36     }
 37  ?>
 38
 39 <!DOCTYPE html>
 40 <html lang="en">
 41
 42 <head>
 43     <meta charset="UTF-8">
 44     <meta name="viewport" content="initial-scale=1">
 45     <title>BookStack | A Simple and Free Documenation Platform</title>
 46
 47     <style>
 48         <?php echo($styles); ?>
 49     </style>
 50
 51 </head>
 52
 53 <body ontouchstart="">
 54
 55     <script>
 56     // Standard Google Analytics Stuff
 57     (function(i, s, o, g, r, a, m) {
 58         i['GoogleAnalyticsObject'] = r;
 59         i[r] = i[r] || function() {
 60             (i[r].q = i[r].q || []).push(arguments)
 61         }, i[r].l = 1 * new Date();
 62         a = s.createElement(o),
 63             m = s.getElementsByTagName(o)[0];
 64         a.async = 1;
 65         a.src = g;
 66         m.parentNode.insertBefore(a, m)
 67     })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
 68
 69     ga('create', 'UA-61486258-4', 'auto');
 70     ga('send', 'pageview');
 71     </script>
 72
 73     <header id="header">
 74         <div class="container">
 75             <div class="row fix-mobile">
 76                 <div class="col-sm-5 col-xs-8">
 77                     <div class="logo">
 78                         <img src="logo.svg" alt="BookStack">
 79                         <h1>BookStack</h1>
 80                     </div>
 81                 </div>
 82                 <div class="col-sm-7 menu col-xs-4">
 83                     <button ontouchstart="" tabindex="1" id="menu-button" class="button muted" type="button"><?php icon('menu'); ?></button>
 84                     <div class="inner">
 85                         <a href="#features"><span class="icon"><?php icon('star'); ?></span> Features</a>
 86                         <a href="#demo"><span class="icon"><?php icon('touch_app'); ?></span> Demo</a>
 87                         <a href="#screenshots"><span class="icon"><?php icon('image'); ?></span> Screenshots</a>
 88                         <a href="https://github.com/ssddanbrown/BookStack" target="_blank"><span class="icon"><?php icon('code'); ?></span> Github</a>
 89                         <a href="/blog" target="_blank"><span class="icon"><?php icon('rss_feed'); ?></span> Blog</a>
 90                     </div>
 91                 </div>
 92             </div>
 93             <div class="row">
 94                 <div class="col-md-4 spaced">
 95                     <h2 >Simple &amp; Free Documentation</h2>
 96                     <p>BookStack is a simple, self-hosted, easy-to-use platform for organising and storing information.</p>
 97                     <a href="https://github.com/ssddanbrown/BookStack" class="button pos "  target="_blank">View on GitHub</a>
 98                 </div>
 99                 <div class="col-md-8 screenshot-container">
 100                     <img class="screenshot" src="images/bookstack-hero-screenshot.png" alt="BookStack ScreenShot">
 101                 </div>
 102             </div>
 103         </div>
 104     </header>
 105     <div class="container md-margin-top">
 106         <h2 id="features">Features</h2>
 107         <div class="row">
 108             <div class="col-sm-4">
 109                 <h3><span class="icon"><?php icon('code'); ?></span>Free &amp; Open Source</h3>
 110                 <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.
 111                 </p>
 112                 <p>
 113                     <a href="https://github.com/ssddanbrown/BookStack">View the source here &raquo;</a>
 114                 </p>
 115             </div>
 116             <div class="col-sm-4" >
 117                 <h3><span class="icon"><?php icon('laptop_chromebook'); ?></span>Easy, Simple Interface</h3>
 118                 <p>
 119                     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:
 120                 </p>
 121                 <p>
 122                     <span class="icon book"><?php icon('book'); ?></span>Books &nbsp;&nbsp;<span class="icon chapter"><?php icon('collections_bookmark'); ?></span>Chapters&nbsp;&nbsp; <span class="icon page"><?php icon('description'); ?></span>Pages
 123                 </p>
 124             </div>
 125             <div class="col-sm-4" >
 126                 <h3><span class="icon"><?php icon('search'); ?></span>Searchable and Connected</h3>
 127                 <p>
 128                     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 keeps your documentation connected.
 129                 </p>
 130             </div>
 131         </div>
 132         <p>
 133             <br>
 134         </p>
 135         <div class="row">
 136             <div class="col-sm-4">
 137                 <h3><span class="icon"><?php icon('build'); ?></span>Configurable</h3>
 138                 <p>
 139                     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.
 140                 </p>
 141             </div>
 142             <div class="col-sm-4" >
 143                 <h3><span class="icon"><?php icon('storage'); ?></span>Simple Requirements</h3>
 144                 <p>
 145                     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.
 146                 </p>
 147             </div>
 148             <div class="col-sm-4" >
 149                 <h3><span class="icon"><?php icon('directions_boat'); ?></span>Powerful Features</h3>
 150                 <p>
 151                     On top of the powerful search and linking there is also cross-book sorting, Page revisions, Image management. Some more mega-features are planned such as static-site generation and quick exporting.
 152                 </p>
 153             </div>
 154         </div>
 155     </div>
 156     <div class="shaded md-margin-top padded-vertical large">
 157         <div class="container">
 158                 <div class="row">
 159                         <div class="col-sm-6">
 160                                 <h2 class="nomargin margin-bottom " id="demo">Try Out BookStack</h2>
 161                                 <p>
 162                                         You can try out BookStack right now by using the given details.
 163                                         <strong>The demo database &amp; image storage is automatically reset every half hour.</strong>
 164                                         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.
 165                                 </p>
 166                                         <div>
 167                                                 <strong>Actions Restricted In Demo</strong>
 168                                                 <ul>
 169                                                         <li>User deletion</li>
 170                                                         <li>User updates</li>
 171                                                         <li>Setting updates</li>
 172                                                 </ul>
 173                                         </div>
 174                         </div>
 175                         <div class="col-sm-6 text-center">
 176                                         <div class="demo-box text-left " >
 177                                                 <label>Demo site url</label> <br><a href="https://demo.bookstackapp.com" target="_blank">https://demo.bookstackapp.com</a> <br>
 178                                                 <label>Admin email</label> <br><input type="text" onclick="this.select();" value="admin@example.com" readonly="true"><br>
 179                                                 <label>Admin password</label> <br><input type="text" onclick="this.select();" value="password" readonly="true"> <br><br>
 180                                                 <a href="https://demo.bookstackapp.com" class="button" target="_blank">Open demo site</a>
 181                                         </div>
 182                         </div>
 183                 </div>
 184         </div>
 185     </div>
 186
 187         <div class="padded-vertical large">
 188                 <div class="container">
 189                         <h2 class="nomargin margin-bottom" id="screenshots">Screenshots</h2>
 190                         <div class="my-gallery">
 191                                 <div class="row">
 192                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 193                                                 <h3>Page View</h3>
 194                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 195                                                     <a href="images/screenshots/page-view.png" data-size="1920x1080">
 196                                                         <img src="images/screenshots/thumb_page-view.png" alt="Page View">
 197                                                     </a>
 198                                                 </figure>
 199                                         </div>
 200                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 201                                                 <h3>Page Editor</h3>
 202                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 203                                                     <a href="images/screenshots/page-edit.png" data-size="1920x1080">
 204                                                         <img src="images/screenshots/thumb_page-edit.png" alt="Page Editing">
 205                                                     </a>
 206                                                 </figure>
 207                                         </div>
 208                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 209                                                 <h3>Image Manager</h3>
 210                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 211                                                     <a href="images/screenshots/image-manager.png" data-size="1920x1080">
 212                                                         <img src="images/screenshots/thumb_image-manager.png" alt="Image Manager">
 213                                                     </a>
 214                                                 </figure>
 215                                         </div>
 216                                 </div>
 217
 218                                 <div class="row">
 219                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 220                                                 <h3>All Books Overview</h3>
 221                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 222                                                     <a href="images/screenshots/books-view.png" data-size="1920x1080">
 223                                                         <img src="images/screenshots/thumb_books-view.png" alt="View of all books">
 224                                                     </a>
 225                                                 </figure>
 226                                         </div>
 227                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 228                                                 <h3>Book Overview</h3>
 229                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 230                                                     <a href="images/screenshots/book-overview.png" data-size="1920x1080">
 231                                                         <img src="images/screenshots/thumb_book-overview.png" alt="Book Overview">
 232                                                     </a>
 233                                                 </figure>
 234                                         </div>
 235                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 236                                                 <h3>Book Sorting</h3>
 237                                                 <figure  itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 238                                                     <a href="images/screenshots/book-sorting.png" data-size="1920x1080">
 239                                                         <img src="images/screenshots/thumb_book-sorting.png" alt="Book Content Sorting View">
 240                                                     </a>
 241                                                 </figure>
 242                                         </div>
 243                                 </div>
 244
 245                                 <div class="row">
 246                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 247                                                 <h3>Global Search</h3>
 248                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 249                                                     <a href="images/screenshots/search.png" data-size="1920x1080">
 250                                                         <img src="images/screenshots/thumb_search.png" alt="Searching all content">
 251                                                     </a>
 252                                                 </figure>
 253                                         </div>
 254                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 255                                                 <h3>App Settings</h3>
 256                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 257                                                     <a href="images/screenshots/settings-view.png" data-size="1920x1080">
 258                                                         <img src="images/screenshots/thumb_settings-view.png" alt="Settings View">
 259                                                     </a>
 260                                                 </figure>
 261                                         </div>
 262                                         <div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
 263                                                 <h3>Profile Update Page</h3>
 264                                                 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 265                                                     <a href="images/screenshots/profile-edit-view.png" data-size="1920x1080">
 266                                                         <img src="images/screenshots/thumb_profile-edit-view.png" alt="Profile Editing Screen">
 267                                                     </a>
 268                                                 </figure>
 269                                         </div>
 270                                 </div>
 271
 272                         </div>
 273                 </div>
 274         </div>
 275
 276
 277     <div class="shaded md-margin-top padded-vertical large">
 278         <div class="container">
 279             <h2>Latest From The Blog</h2>
 280               <?php foreach($blogItems as $blogItem): ?>
 281                 <div class="row">
 282                     <div class="col-md-8">
 283                         <h3><a href="<?php echo($blogItem->link) ?>"><?php echo($blogItem->title) ?></a></h3>
 284                         <p><?php echo(strip_tags($blogItem->description)) ?> <a href="<?php echo($blogItem->link) ?>">&raquo;</a></p>
 285                     </div>
 286                 </div>
 287               <?php endforeach; ?>
 288               <div class="padded-top"><a class="button" href="/blog">Read the blog &raquo;</a></div>
 289         </div>
 290     </div>
 291
 292     <footer>
 293         <div class="container">
 294             <div class="row">
 295                 <div class="col-lg-3">
 296                         <p>
 297                             BookStack - Created By <a href="https://danb.me" title="danb.me" target="_blank">Dan Brown</a>
 298                         </p>
 299                 </div>
 300                 <div class="col-md-9 menu">
 301                     <a href="#features"><span class="icon"><?php echo file_get_contents('icons/star.svg') ?></span> Features</a>
 302                     <a href="#demo"><span class="icon"><?php icon('touch_app'); ?></span> Demo</a>
 303                     <a href="#screenshots"><span class="icon"><?php icon('image'); ?></span> Screenshots</a>
 304                     <a href="https://github.com/ssddanbrown/BookStack" target="_blank"><span class="icon"><?php icon('code'); ?></span> Github</a>
 305                     <a href="/blog" target="_blank"><span class="icon"><?php icon('rss_feed'); ?></span> Blog</a>
 306                 </div>
 307             </div>
 308         </div>
 309     </footer>
 310
 311     <!-- Root element of PhotoSwipe. Must have class pswp. -->
 312         <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
 313             <div class="pswp__bg"></div>
 314             <div class="pswp__scroll-wrap">
 315                 <div class="pswp__container">
 316                     <div class="pswp__item"></div>
 317                     <div class="pswp__item"></div>
 318                     <div class="pswp__item"></div>
 319                 </div>
 320                 <div class="pswp__ui pswp__ui--hidden">
 321                     <div class="pswp__top-bar">
 322                         <div class="pswp__counter"></div>
 323                         <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
 324                         <button class="pswp__button pswp__button--share" title="Share"></button>
 325                         <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
 326                         <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
 327                         <div class="pswp__preloader">
 328                             <div class="pswp__preloader__icn">
 329                               <div class="pswp__preloader__cut">
 330                                 <div class="pswp__preloader__donut"></div>
 331                               </div>
 332                             </div>
 333                         </div>
 334                     </div>
 335                     <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
 336                         <div class="pswp__share-tooltip"></div>
 337                     </div>
 338                     <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
 339                     </button>
 340                     <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
 341                     </button>
 342                     <div class="pswp__caption">
 343                         <div class="pswp__caption__center"></div>
 344                     </div>
 345                 </div>
 346             </div>
 347         </div>
 348
 349     <script async src="libs/photoswipe.min.js"></script>
 350     <script async src="libs/photoswipe-ui-default.min.js"></script>
 351     <script async src="dist/main.min.js"></script>
 352 </body>
 353
 354 </html>