BookStack is an open-source, web-based platform for organizing, storing, and sharing knowledge and documentation. It was developed to provide a user-friendly and intuitive interface for creating and managing knowledge bases, wikis, and other types of structured content.
BookStack allows users to create books, chapters, and pages, and to organize them hierarchically. Users can also add images, files, and links to their content, and collaborate with others by assigning roles and permissions. BookStack also supports full-text search, version control, and commenting, making it easy to find and update information.
BookStack is written in PHP and uses the Laravel framework, and it is available for free under the MIT License.
This is my internal homelab documentation system, I use it for private and client related content. Bookstack is fast, clean and well documented. It has really elevated the way I store and access important reminders / how-tos and documentation.
The system provides API access and has many ways to tweak it. Bookstack documentation.
CSV stands for “Comma-Separated Values”. It is a simple file format used to store tabular data, such as spreadsheets or databases, in plain text. In a CSV file, each line represents a row of data, and each column is separated by a comma (or sometimes a semicolon or tab).
There are always CSV exports or other data stored in CSV format, that i need quick access to sometimes.
Bookstack allows to add files to pages and insert links to them, but it does not embed or parse those files in any way. There are similar hacks to mine, this example allows to embed PDFs and here the main Hacks page.
We need something to parse the CSV file and something to display the information in a nice visual & flexible grid.
Included and linked CSV files look something like that in source.
-
<p id="bkmrk-samplecsvfile_2kb.cs">
-
<a href="https://bookstack.instance/attachments/12" target="_blank" rel="noopener">SampleCSVFile_2kb.csv</a>
-
</p>
The settings allow you to add custom code to your instance. Another option would be to tweak template files, but its easier to do these light tweaks using the header customizer.
This can be found under: https://bookstack.instance/settings/customization
Either link them externally or better use locally stored versions of these.
-
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/papaparse@5.4.0/papaparse.min.js"></script>
-
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
-
<script>
-
function init() {
- document.querySelectorAll('.page-content a').forEach((node, i) => {
- let parent = node;
- let unique = i;
- let text = node.textContent
- let link = node.href
-
- if (text.search(".csv") !== -1) {
- let header;
- let rows = [];
- let json = JSON.parse(node.getAttribute("title"));
-
- Papa.parse(link, {
- download: true,
- header: false,
- complete: function(results) {
- results.data.map(function(data, index) {
- if(!!json){
- let removeValFrom = json.remove_cols;
- data = data.filter(function(value, index) {
- return removeValFrom.indexOf(index) == -1;
- })
- }
- if (index == 0) {
- header = data;
- } else {
- rows.push(data);
- }
- });
- const csv_wrapper = document.createElement("div");
- csv_wrapper.setAttribute("id", "csv_wrapper_" + unique_id);
- parent.after(csv_wrapper);
-
- new gridjs.Grid({
- search: true,
- columns: header,
- data: rows,
- fixedHeader: true,
- sort: true,
- pagination: {
- limit: 6
- }
- }).render(document.getElementById("csv_wrapper_" + unique_id));
-
- }
- });
- }
- });
- }
- window.addEventListener('DOMContentLoaded', init);
-
</script>
Github: Will be adding more hacks, as I clean some of them up :)
You can use the title attribute to pass some config data, in JSON format. Currently only to strip columns, but will extend that a bit more for flexible usage ;)
-
{"remove_cols":[0,1,2,3,6,7,8,9,10]}
Should look something like that …
Enjoy coding …
BOOKING SOLUTIONS 202x This is my take on a subset of booking, appointment, PMS or… Read More
THE GOAL Create a system cron for WordPress, that is accessible and can be easily… Read More
2024, what's cooking? Slowly getting into the 2024 spirit. 3 projects coming to a close… Read More
Short look back at 2023 This has been a busy and interesting year. I am… Read More
Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when… Read More
Archaeology Travel is an online travel guide for people who enjoy exploring the world’s pasts.… Read More