bookstack/website
Fork 4
Code Issues 5 Pull requests Activity

Restructured footer and about pages

Browse source 
- Changed footer to hold more links in an organised way. - Changed about pages to be simplier for easier creation.
This commit is contained in:
Dan Brown 2022-02-09 23:24:14 +00:00
commit ec0e6abc10
Signed by: danb
GPG key ID: 46D9F943C24A2EF9
7 changed files with 120 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

128
content/about/confluence-alternative.html
View file

@ -1,128 +0,0 @@
---
title: "BookStack: An Open Source Alternative to Confluence"
image: "/images/about/books-view.png"
---
<div class="container">
<div class="padded-top">
<h2 class="margin-bottom large">What BookStack <br> Offers</h2>
<p>&nbsp;</p>
<div class="row">
<div class="col-sm-4">
<h4>Free and Open Source</h4>
<p>
BookStack is 100% free to use under the MIT license.
The code is fully open; Use and modify BookStack any way you
like, just provide attribution if you distribute the code.
</p>
</div>
<div class="col-sm-4">
<h4>Self-Host However You Please</h4>
<p>
There's no push to the cloud here unless that's your preference.
Whether you install on a Raspberry Pi, or stick it in AWS; It's fully up to you.
You can ensure your documentation stays behind your firewall.
</p>
</div>
<div class="col-sm-4">
<h4>Lightweight and Speedy</h4>
<p>
Tired of seeing placeholder content while your pages load? Tired of managing bloated Java processes? BookStack is built in modern PHP and can run on lightweight systems.
</p>
</div>
</div>
<p>
<br>
</p>
<div class="row">
<div class="col-sm-4">
<h4>WYSIWYG Editing Experience</h4>
<p>
BookStack uses a WYSWIYG editor at it's core, with a range of essential formatting options and features. No scary mark-up language. Ideal for mixed-skill environments.
</p>
</div>
<div class="col-sm-4">
<h4>Standard Content Storage Format</h4>
<p>
BookStack primarily retains content in a relatively focused and flat layer of HTML. One of our ideals is to keep the format relatively standardised for if you ever need to migrate away from BookStack.
</p>
</div>
<div class="col-sm-4">
<h4>System API</h4>
<p>
Our growing REST API allows the programming of automation where desired, and provides a mechanism for import where needed.
</p>
</div>
</div>
<p>
<br>
</p>
<div class="row">
<div class="col-sm-4">
<h4>An Open Community</h4>
<p>
Whether it's via GitHub, Discord or our subreddit, you can discuss with and seek help from the BookStack developers & the wider community.
</p>
</div>
<div class="col-sm-4">
<h4>Diagrams.net Integration, Built In</h4>
<p>
Want to create diagrams in your documentation? You can jump directly into an embedded <a href="https://www.diagrams.net/">diagrams.net</a> editing
session which will save directly into BookStack.
</p>
</div>
<div class="col-sm-4">
<h4>Authentication Options</h4>
<p>
A range of authentication options and controls are built-in including LDAP, SAML2 and a range of OAuth clients. Additionally MFA with role-based enforcement can be used with any of these.
</p>
</div>
</div>
<div class="row padded-vertical large">
<div class="col-sm-6">
<p class="text-center">
<a href="https://github.com/BookStackApp/BookStack">GitHub</a> &nbsp; | &nbsp;
<a href="https://demo.bookstackapp.com">Demo Instance</a> &nbsp; | &nbsp;
<a href="/docs/admin/installation">Installation Instructions</a>
</p>
</div>
<div class="col-sm-6">
<p class="text-center">
<a href="/">
Read more and see screenshots on our homepage &raquo;
</a>
</p>
</div>
</div>
</div>
</div>
<div class="shaded shaded-border padded-vertical large">
<div class="container pb-l">
<h2>Migrating From Confluence to BookStack</h2>
<p class="margin-bottom large">
We don't yet have an automated way to migrate your content directly from Confluence to BookStack. <br>
We do have a growing REST API that can be used to automate some of the process where possible. <br>
In the future we'd like to have some tools to assist with a migration but the opportunity <br> to create such tools has not yet presented itself.
</p>
</div>
</div>

57
content/about/confluence-alternative.md Normal file
View file

@ -0,0 +1,57 @@
---
title: "BookStack: An Open Source Alternative to Confluence"
---
### What BookStack Offers
##### Free and Open Source
BookStack is 100% free to use under the MIT license. The code is fully open; Use and modify BookStack any way you like, just provide attribution if you distribute the code.
##### Self-Host However You Please
There's no push to the cloud here unless that's your preference. Whether you install on a Raspberry Pi, or stick it in AWS; It's fully up to you. You can ensure your documentation stays behind your firewall.
##### Lightweight and Speedy
Tired of seeing placeholder content while your pages load? Tired of managing bloated Java processes? BookStack is built in modern PHP and can run on lightweight systems.
##### WYSIWYG Editing Experience
BookStack uses a WYSWIYG editor at it's core, with a range of essential formatting options and features. No scary mark-up language. Ideal for mixed-skill environments.
##### Standard Content Storage Format
BookStack primarily retains content in a relatively focused and flat layer of HTML. One of our ideals is to keep the format relatively standardised for if you ever need to migrate away from BookStack.
##### System API
Our growing REST API allows the programming of automation where desired, and provides a mechanism for import where needed.
##### An Open Community
Whether it's via GitHub, Discord or our subreddit, you can discuss with and seek help from the BookStack developers & the wider community.
##### Diagrams.net Integration, Built In
Want to create diagrams in your documentation? You can jump directly into an embedded [diagrams.net](https://www.diagrams.net/) editing session which will save directly into BookStack.
##### Authentication Options
A range of authentication options and controls are built-in including LDAP, SAML2 and a range of OAuth clients. Additionally MFA with role-based enforcement can be used with any of these.
---
[GitHub](https://github.com/BookStackApp/BookStack)   |   [Demo Instance](https://demo.bookstackapp.com)   |   [Installation Instructions](/docs/admin/installation)
[Read more and see screenshots on our homepage »](/)
---
## Migrating From Confluence to BookStack
We don't yet have an automated way to migrate your content directly from Confluence to BookStack.
We do have a growing REST API that can be used to automate some of the process where possible.
In the future we'd like to have some tools to assist with a migration but the opportunity
to create such tools has not yet presented itself.

34
themes/bookstack/layouts/about/single.html
View file

@ -1,29 +1,19 @@
{{ partial "header.html" . }}
<div class="header">
<div class="container">
<div class="row hero">
<div class="col-md-4 spaced">
<h1>{{.Title}}</h1>
</div>
<div class="col-md-8 screenshot-container-parent">
<div class="screenshot-container">
<div class="window-row">
<div class="window-option red"></div>
<div class="window-option" style="background-color: orange;"></div>
<div class="window-option" style="background-color: green;"></div>
</div>
{{ if .Params.image }}
<img class="screenshot" src="{{.Params.image}}" alt="{{.Title}}">
{{ end }}
</div>
</div>
<div class="about-page">
<div class="shaded primary">
<div class="container small hero padded-vertical">
<h1 class="text-center">{{.Title}}</h1>
{{ if .Params.image }}
<!-- <img class="screenshot" src="{{.Params.image}}" alt="{{.Title}}"> -->
{{ end }}
</div>
</div>
<div class="container small padded-vertical">
{{.Content}}
</div>
</div>
{{.Content}}
{{ partial "footer.html" . }}

61
themes/bookstack/layouts/partials/footer.html
View file

@ -5,43 +5,48 @@
<div class="row">
<div class="col-lg-4">
<p class="text-small">
<iframe src="https://github.com/sponsors/ssddanbrown/button" title="Sponsor ssddanbrown" height="35" width="116" style="border: 0;" loading="lazy"></iframe>
<br><br>
BookStack - Created By <a href="https://danb.me" title="danb.me" target="_blank" rel="noopener">Dan Brown</a> and developed with the <a href="https://github.com/BookStackApp/BookStack/graphs/contributors" target="_blank" rel="noopener">community</a>.
<br>
<!-- Thanks to <a href="https://www.browserstack.com/" target="_blank">BrowserStack</a> for providing easy cross-browser testing. <br> -->
Page generated with <a href="https://gohugo.io">hugo</a>, Site source can be found <a href="https://github.com/BookStackApp/website" rel="noopener" target="_blank">here on GitHub</a>.
</p>
</div>
<div class="col-lg-8 col-md-9 menu">
<a href="{{.Site.BaseURL}}docs"><span class="icon" aria-hidden="true">{{partial "icon/book.svg"}}</span>Documentation</a>
<a href="{{.Site.BaseURL}}#features"><span class="icon" aria-hidden="true">{{partial "icon/star.svg"}}</span>Features</a>
<a href="{{.Site.BaseURL}}#demo"><span class="icon" aria-hidden="true">{{partial "icon/touch_app.svg"}}</span>Demo</a>
<a href="https://github.com/BookStackApp/BookStack" target="_blank"><span class="icon" aria-hidden="true">{{partial "icon/github.svg"}}</span>Github</a>
<a href="https://discord.gg/ztkBqR2" target="_blank"><span class="icon" aria-hidden="true">{{partial "icon/discord.svg"}}</span>Discord</a>
<a href="https://twitter.com/bookstack_app" target="_blank"><span class="icon" aria-hidden="true">{{partial "icon/twitter.svg"}}</span>Twitter</a>
<a href="{{.Site.BaseURL}}blog" target="_blank"><span class="icon" aria-hidden="true">{{partial "icon/rss_feed.svg"}}</span>Blog</a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="text-small">
<br><br>
This website uses a self-hosted instance of <a href="https://plausible.io/" target="_blank" rel="noreferrer">Plausible</a> for analytics.
Our site stats can <a href="https://analytics.bookstackapp.com/bookstackapp.com" target="_blank" rel="noreferrer">be viewed here</a>.
We also use <a href="https://www.meilisearch.com/" target="_blank" rel="noreferrer">MeiliSearch</a> for providing better search.
<br><br>
Latest Blog Post:
{{ range first 1 ( where .Site.Pages "Section" "blog") }}
<a href="{{.Permalink}}">{{ .Title }}</a>
{{ end }}
&nbsp;|&nbsp;
<a href="/about/confluence-alternative">BookStack: A Confluence Alternative</a>
</p>
</div>
<div class="col-md-6 text-right">
<iframe src="https://github.com/sponsors/ssddanbrown/button" title="Sponsor ssddanbrown" height="35" width="116" style="border: 0;margin-top: 1rem;" loading="lazy"></iframe>
</div>
</div>
<div class="col-lg-1"></div>
<div class="col-xs-6 col-sm-4 col-lg-2">
<h5>On the site</h5>
<ul class="nav-list">
<li><a href="{{.Site.BaseURL}}docs">Documentation</a></li>
<li><a href="{{.Site.BaseURL}}#features">Our Features</a></li>
<li><a href="{{.Site.BaseURL}}#demo">View the Demo</a></li>
<li><a href="{{.Site.BaseURL}}blog" target="_blank">Read our Blog</a></li>
</ul>
</div>
<div class="col-xs-6 col-sm-4 col-lg-2">
<h5>Follow Us</h5>
<ul class="nav-list">
<li><a href="https://github.com/BookStackApp/BookStack" target="_blank">Github</a></li>
<li><a href="https://discord.gg/ztkBqR2" target="_blank">Discord</a></li>
<li><a href="https://twitter.com/bookstack_app" target="_blank">Twitter</a></li>
<li><a href="https://www.youtube.com/channel/UCH66RFWfw6CSm2T1EM4ik1g" target="_blank">YouTube</a></li>
</ul>
</div>
<div class="col-6 col-sm-4 col-lg-3">
<h5>Information</h5>
<ul class="nav-list">
<li><a href="/about/confluence-alternative">A Confluence Alternative</a></li>
</ul>
</div>
</div>
<p class="text-small">
This website uses a self-hosted instance of <a href="https://plausible.io/" target="_blank" rel="noreferrer">Plausible</a> for analytics.
Our site stats can <a href="https://analytics.bookstackapp.com/bookstackapp.com" target="_blank" rel="noreferrer">be viewed here</a>.
We also use <a href="https://www.meilisearch.com/" target="_blank" rel="noreferrer">MeiliSearch</a> for providing better search.
</p>
</div>
</footer>

2
themes/bookstack/sass/_blocks.scss
View file

@ -17,7 +17,7 @@
background-color: lighten($negative, 20%);
}
&.primary {
background-color: lighten($primary, 40%);
background-color: rgba($primary, 10%);
}
&.secondary {
background-color: lighten($secondary, 30%);

10
themes/bookstack/sass/_header.scss
View file

@ -82,3 +82,13 @@
text-decoration: none;
}
}
ul.nav-list {
list-style: none;
padding-left: 0;
margin-left: 0;
li {
display: block;
padding: .5rem 0;
}
}

7
themes/bookstack/sass/styles.scss
View file

@ -394,6 +394,13 @@ h2.thin-margin {
}
}
.about-page {
h1 {
font-size: 4rem;
font-weight: 500;
}
}
input[type="text"].doc-search-input {
background-color: transparent;