bookstack/website
Fork 4
Code Issues 5 Pull requests Activity

Updated install docs, Added code highlighting, Updated styles

Browse source
This commit is contained in:
Dan Brown 2016-09-18 19:41:07 +01:00
commit a15c05af9b
Signed by: danb
GPG key ID: 46D9F943C24A2EF9
14 changed files with 1012 additions and 646 deletions
Download patch file Download diff file Expand all files Collapse all files

50
resources/docs/admin/installation.md
View file

@ -1,18 +1,24 @@
# Installation
### Requirements
* [Manual](#manual)
* [Docker](#docker)
* [Ubuntu 16.04 Script](#ubuntu-1604)
## Manual Installation <a name="manual"></a>
#### Requirements
BookStack has similar requirements to Laravel:
* PHP >= 5.5.9, Will need to be usable from the command line.
* PHP >= 5.6.4, Will need to be usable from the command line.
* PHP Extensions: `OpenSSL`, `PDO`, `MBstring`, `Tokenizer`, `GD`, `MySQLND`
* MySQL >= 5.6
* Git (Not strictly required but helps manage updates)
* [Composer](https://getcomposer.org/)
### Installation
#### Instructions
Ensure the above requirements are met before installing. Currently BookStack requires its own domain/subdomain and will not work in a site subdirectory.
Ensure the above requirements are met before installing.
This project currently uses the `release` branch of the BookStack GitHub repository as a stable channel for providing updates. The installation is currently somewhat complicated and will be made simpler in future releases. Some PHP/Laravel experience will currently benefit.
@ -31,9 +37,7 @@ This project currently uses the `release` branch of the BookStack GitHub reposit
8. Run `php artisan migrate` to update the database.
9. Done! You can now login using the default admin details `admin@admin.com` with a password of `password`. It is recommended to change these details directly after first logging in.
---
### URL Rewrite rules
#### URL Rewrite rules
**Apache**
```
@ -51,3 +55,35 @@ location / {
try_files $uri $uri/ /index.php?$query_string;
}
```
---
## Docker Image <a name="docker"></a>
A community built docker image is available for those that prefer to use a containerised version of BookStack. This image runs on Apache and PHP7. A docker compose file is also available to bring up a whole BookStack environment which includes MySQL 5.7. Here are the links for the docker image:
* [GitHub repository including docker compose file](https://github.com/solidnerd/docker-bookstack)
* [Docker Hub page](https://hub.docker.com/r/solidnerd/bookstack/)
---
## Ubuntu 16.04 Installation Script <a name="ubuntu-1604"></a>
A script to install BookStack on a fresh instance of Ubuntu 16.04 is available. This script is ONLY FOR A FRESH OS, It will install Nginx, MySQL 5.7, & PHP7 and could OVERWRITE any existing web setup on the machine. It also does not set up mail settings or configure system security so you will have to do those separately. You can use the script as a reference if you're installing on a non-fresh machine.
[Link to installation script](https://github.com/BookStackApp/devops/blob/master/scripts/installation-ubuntu-16.04.sh)
#### Running the Script
``` bash
# Ensure you have read the above information about what this script does before executing these commands.
# Download the script
wget https://raw.githubusercontent.com/BookStackApp/devops/master/scripts/installation-ubuntu-16.04.sh
# Make it executable
chmod a+x
# Run the script with admin permissions
sudo ./installation-ubuntu-16.04.sh
```

2
resources/docs/admin/visual-customisation.md
View file

@ -5,7 +5,7 @@ Changing the app name will simply update the name displayed in the header and br
Changing the logo updates the logo shown in the header. This can be removed if you only want to display the chosen name.
Changing the app color will update the color of the header, links and the majority of buttons within the system.
### Further customisation
### Further Customisation
If you need to customise BookStack further to the given controls in the settings area you can make use of the 'Custom HTML head content' setting. Using this you can add in any custom JavaScript or CSS content to override default BookStack functionality and styles.

10
resources/sass/_header.scss
View file

@ -34,6 +34,8 @@ header {
}
.icon svg {
fill: #FFF;
height: 18px;
margin-top: 3px;
}
}
@ -47,14 +49,14 @@ header {
}
h1 {
color: #FFF;
font-size: 2.666em;
font-size: 1.8em;
font-weight: 400;
padding: 4px 0;
}
svg {
margin-right: $-l;
height: 48px;
margin-right: $-m;
height: 43px;
width: auto;
//padding-top: $-m;
}
@include smaller-than($s) {
h1 {

25
resources/sass/_text.scss
View file

@ -46,19 +46,19 @@ h1 {
margin-bottom: 0.48888889em;
}
h2 {
font-size: 2.8275em;
font-size: 2.6666em;
line-height: 1.294117647em;
margin-top: 0.8627451em;
margin-bottom: 0.43137255em;
}
h3 {
font-size: 1.75em;
font-size: 2.2222em;
line-height: 1.571428572em;
margin-top: 0.78571429em;
margin-bottom: 0.43137255em;
}
h4 {
font-size: 1em;
font-size: 1.666em;
line-height: 1.375em;
margin-top: 0.78571429em;
margin-bottom: 0.43137255em;
@ -113,7 +113,7 @@ hr {
height: 1px;
border: 0;
background: #EAEAEA;
margin-bottom: $-l;
margin: $-xl 0;
&.faded {
background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
}
@ -148,14 +148,20 @@ pre {
white-space:pre;
font-size: 0.8em;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 1px 2px 0px rgba(10, 10, 10, 0.06);
border: 1px solid rgba(221, 221, 221, 0.66);
background-color: #fdf6e3;
padding: 0.5em;
border-radius: 2px;
// box-shadow: inset 1px 2px 2px rgba(10, 10, 10, 0.06);
border: 1px solid #DDD;
border-top: 3px solid $primary;
background-color: #F8F8F8;
padding: 0;
overflow-x: auto;
}
pre>code.hljs {
padding: $-s;
background: #F8F8F8;
}
blockquote {
display: block;
position: relative;
@ -336,4 +342,3 @@ span.icon {
.icon.book svg { fill: $color-book; }
.icon.chapter svg { fill: $color-chapter; }
.icon.page svg { fill: $color-page; }

8
resources/views/base.blade.php
View file

@ -24,6 +24,8 @@
@endif
<link rel="stylesheet" href="/dist/styles.min.css">
@yield('head')
</head>
<body>
@ -49,16 +51,16 @@
<header id="header">
<div class="container">
<div class="row fix-mobile">
<div class="col-sm-5 col-xs-8">
<div class="col-sm-4 col-xs-8">
<div class="logo">
<a href="/">
{!! icon('logo') !!}
<h1>BookStack</h1>
</a>
</div>
</div>
<div class="col-sm-7 menu col-xs-4">
<div class="col-sm-8 menu col-xs-4">
<button tabindex="1" id="menu-button" class="button muted" type="button">{!! icon('menu') !!}</button>
<div class="inner">
<a href="/docs"><span class="icon">{!! icon('book') !!}</span> Documentation</a>

12
resources/views/docs/admin.blade.php
View file

@ -1,5 +1,11 @@
@extends('base')
@section('head')
<link rel="stylesheet" href="/libs/highlight/styles/atom-one-light.css">
<script type="text/javascript" src="/libs/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
@stop
@section('header')
<div class="row">
<div class="col-md-12">
@ -11,14 +17,14 @@
@section('content')
<div class="container">
<div class="col-sm-2 sidebar">
@include('docs/admin-sidebar')
</div>
<div class="col-sm-8 col-sm-offset-1 docs-content">
<a class="float right edit-link" target="_blank"
href="https://github.com/ssddanbrown/BookStack-Site/blob/master/resources/docs/{{ $type }}/{{ $page }}.md">
href="https://github.com/BookStackApp/website/blob/master/resources/docs/{{ $type }}/{{ $page }}.md">
<span class="icon small">{!! icon('edit') !!}</span>
Edit page
</a>
@ -27,4 +33,4 @@
</div>
@stop
@stop

12
resources/views/docs/user.blade.php
View file

@ -1,5 +1,11 @@
@extends('base')
@section('head')
<link rel="stylesheet" href="/libs/highlight/styles/atom-one-light.css">
<script type="text/javascript" src="/libs/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
@stop
@section('header')
<div class="row">
<div class="col-md-12">
@ -11,16 +17,16 @@
@section('content')
<div class="container">
<div class="col-sm-2 sidebar">
@include('docs/user-sidebar')
</div>
<div class="col-sm-8 col-sm-offset-1 docs-content">
<a class="float right edit-link" target="_blank"
href="https://github.com/ssddanbrown/BookStack-Site/blob/master/resources/docs/{{ $type }}/{{ $page }}.md">
href="https://github.com/BookStackApp/website/blob/master/resources/docs/{{ $type }}/{{ $page }}.md">
<span class="icon small">{!! icon('edit') !!}</span>
Edit page
Edit this page
</a>
{!! $html !!}
</div>

34
resources/views/home.blade.php
View file

@ -11,7 +11,7 @@
<img class="screenshot" src="images/bookstack-hero-screenshot.png" alt="BookStack ScreenShot">
</div>
</div>
@stop
@stop
@section('content')
@ -21,7 +21,7 @@
<h2 id="features">Features</h2>
<div class="row">
<div class="col-sm-4">
<h3><span class="icon">{!! icon('code') !!}</span>Free &amp; Open Source</h3>
<h4><span class="icon">{!! icon('code') !!}</span>Free &amp; Open Source</h4>
<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.
</p>
<p>
@ -29,7 +29,7 @@
</p>
</div>
<div class="col-sm-4" >
<h3><span class="icon">{!! icon('laptop_chromebook') !!}</span>Easy, Simple Interface</h3>
<h4><span class="icon">{!! icon('laptop_chromebook') !!}</span>Easy, Simple Interface</h4>
<p>
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:
</p>
@ -38,7 +38,7 @@
</p>
</div>
<div class="col-sm-4" >
<h3><span class="icon">{!! icon('search') !!}</span>Searchable and Connected</h3>
<h4><span class="icon">{!! icon('search') !!}</span>Searchable and Connected</h4>
<p>
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.
</p>
@ -49,19 +49,19 @@
</p>
<div class="row">
<div class="col-sm-4">
<h3><span class="icon">{!! icon('build') !!}</span>Configurable</h3>
<h4><span class="icon">{!! icon('build') !!}</span>Configurable</h4>
<p>
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.
</p>
</div>
<div class="col-sm-4" >
<h3><span class="icon">{!! icon('storage') !!}</span>Simple Requirements</h3>
<h4><span class="icon">{!! icon('storage') !!}</span>Simple Requirements</h4>
<p>
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.
</p>
</div>
<div class="col-sm-4" >
<h3><span class="icon">{!! icon('directions_boat') !!}</span>Powerful Features</h3>
<h4><span class="icon">{!! icon('directions_boat') !!}</span>Powerful Features</h4>
<p>
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.
</p>
@ -105,7 +105,7 @@
<div class="my-gallery">
<div class="row">
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Page View</h3>
<h4>Page View</h4>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/page-view.png" data-size="1920x1080">
<img src="images/screenshots/thumb_page-view.png" alt="Page View">
@ -113,7 +113,7 @@
</figure>
</div>
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Page Editor</h3>
<h4>Page Editor</h4>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/page-edit.png" data-size="1920x1080">
<img src="images/screenshots/thumb_page-edit.png" alt="Page Editing">
@ -121,7 +121,7 @@
</figure>
</div>
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Image Manager</h3>
<h4>Image Manager</h4>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/image-manager.png" data-size="1920x1080">
<img src="images/screenshots/thumb_image-manager.png" alt="Image Manager">
@ -132,7 +132,7 @@
<div class="row">
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>All Books Overview</h3>
<h4>All Books Overview</h4>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/books-view.png" data-size="1920x1080">
<img src="images/screenshots/thumb_books-view.png" alt="View of all books">
@ -140,7 +140,7 @@
</figure>
</div>
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Book Overview</h3>
<h4>Book Overview</h4>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/book-overview.png" data-size="1920x1080">
<img src="images/screenshots/thumb_book-overview.png" alt="Book Overview">
@ -148,7 +148,7 @@
</figure>
</div>
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Book Sorting</h3>
<h4>Book Sorting</h4>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/book-sorting.png" data-size="1920x1080">
<img src="images/screenshots/thumb_book-sorting.png" alt="Book Content Sorting View">
@ -159,7 +159,7 @@
<div class="row">
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Global Search</h3>
<h4>Global Search</h4>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/search.png" data-size="1920x1080">
<img src="images/screenshots/thumb_search.png" alt="Searching all content">
@ -167,7 +167,7 @@
</figure>
</div>
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>App Settings</h3>
<h4>App Settings</h4>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/settings-view.png" data-size="1920x1080">
<img src="images/screenshots/thumb_settings-view.png" alt="Settings View">
@ -175,7 +175,7 @@
</figure>
</div>
<div class="col-sm-4 col-sm-offset-0 col-xs-8 col-xs-offset-2">
<h3>Profile Update Page</h3>
<h4>Profile Update Page</h4>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/screenshots/profile-edit-view.png" data-size="1920x1080">
<img src="images/screenshots/thumb_profile-edit-view.png" alt="Profile Editing Screen">
@ -247,4 +247,4 @@
@section('scripts')
<script async src="libs/photoswipe.min.js"></script>
@stop
@stop