3. März 2023

Bookstack: Embed local CSV files

What is Bookstack

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.

What are you using it for?

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.

Why display CSV files?

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.

Lets get started!

We need something to parse the CSV file and something to display the information in a nice visual & flexible grid.

I am choosing Papa Parse for the CSV parsing, wrote about it a long time ago and still using it actively for many projects.

Papaparse can handle CSV files with different delimiters, encodings, and line endings, and can also handle complex data formats, such as quoted values, escaped characters, and multi-line cells. The library is widely used in web applications, data analysis tools, and other software that deal with CSV data.
Grid.js is my library of choice to display the parsed information in a nice grid.

Grid.js is a modern and open-source JavaScript library for building responsive and customizable data tables in web applications.

It provides a simple and intuitive API for creating, styling, and populating tables with data from various sources, including JSON, CSV, and Excel files.

Grid.js supports features such as sorting, filtering, pagination, column resizing, and cell formatting, as well as advanced features such as tree grids, custom renderers, and editable cells. The library also includes built-in plugins for exporting data to different formats, such as CSV, Excel, and PDF.

Include the file in Bookstack

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>

<a href="https://bookstack.instance/attachments/12" target="_blank" rel="noopener">SampleCSVFile_2kb.csv</a>

</p>

Tweak the header

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

Add required libs

Either link them externally or better use locally stored versions of these.

Papa Parse
Grid.JS

<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>
<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />

Find CSV links in the page and append to link

This searches the page_content for elements that have “.csv” in their textContent.
Gets textContent and the href of the link.
The link is passed to Papa Parse for processing.
On completion the data result is split into the header row and the rest.
That data is passed to Grid.JS and added to a container element after the link.
Grid.JS provides a ton of configuration options, I added the most common as a starting point. This includes different ways to style the grid.

<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>

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 :)

A bonus

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 ;)

portalZINE NMN | Development meets Creativity | json grid js

{"remove_cols":[0,1,2,3,6,7,8,9,10]}

1	{"remove_cols":[0,1,2,3,6,7,8,9,10]}

The result

Should look something like that …

portalZINE NMN | Development meets Creativity |

Enjoy coding …

14. Januar 2023

Übersicht – Using your Desktop for more !

What is Übersicht?

“Übersicht” is a German word that means “overview” or “summary” in English. The name of the software was chosen because it allows users to have a quick overview of various information on their desktop. It’s also a play on words, because in German the name of the software can be translated as “super sight” which refers to the ability to have a lot of information at a glance.

Übersicht is a lightweight and powerful application that allows users to create and customize desktop widgets using web technologies such as HTML, CSS, and JavaScript. With Übersicht, you can create widgets that display information such as the weather, calendar events, system resource usage, and more. The widgets can be customized to display the information in any format and can be positioned anywhere on the desktop, allowing you to create a personalized and efficient workspace.

Übersicht widgets are created using a simple and user-friendly interface that allows you to preview and edit the widget’s code. The widgets are also highly customizable, allowing you to change the appearance and behavior of the widgets to suit your needs. Additionally, Übersicht widgets can be shared with other users, and there are a variety of widgets available for download from the developer’s website.

The application is open-source and free to use, and it’s also lightweight, it won’t affect your computer performance. Overall, Übersicht is a powerful and versatile tool for creating custom desktop widgets on macOS.

Custom Desktop Widgets / MenuBar Enhancements

There are several other tools similar to Übersicht that allow you to create custom desktop widgets. Some of the most popular alternatives include:

Geektool (Mac): is a powerful and flexible tool for creating custom desktop widgets on macOS. It allows you to display information such as the weather, calendar events, system resource usage, and more.
I used it for a while, but never really got into it any deeper. It has been a resource hog for some as well.
xbar (Mac): is an open-source tool that lets you put the output from any script/program in your macOS menu bar. This is a complete rewrite of BitBar in Go.
This will also make into my workflow :)
SwiftBar :Add custom menu bar programs on macOS in three easy steps: Write a shell script.Add it to SwiftBar … there is no 3rd step!
Conky (Mac / Limnux) is a free, light-weight system monitor for X, that displays any kind of information on your desktop. It can also run on macOS, output to your console, a file, or even HTTP.
Hologram Desktop (Mac / Free / InAppPurchases)
WidgetWall (Mac / Paid) : Looks nice, but too limited for me.
Beaconly (Mac / Free / InAppPurchases ): Beaconly is a flexible, easy to use data aggregating menu app that ties relevant information to you, beautifully one click-away in your macOs menu bar.
Rainmeter: is a Windows-only tool similar to Übersicht. It allows users to create custom desktop widgets using a variety of pre-built skins or by creating your own skins using HTML, CSS, and JavaScript.
This is the goto solution for any Windows user!

What are you using these for?

With many external systems in play, its always crucial to keep an eye on things. I have build nice dashboards, using Grafana, InfluxDB, NetData and Prometheus. But they are either displayed in a browser window or on a separate screen.

If you have 2 / 3 monitors or an ultra-wide screen, you have a lot of Desktop real-estate you can use.

That is something that I have been looking at for years, but only tried for a short period of time. This year I want to really build out desktop and menu widgets , that help me to get an even better overview of things and help reduce repetitive tasks.

I will share links to things I like and share access to the widgets I build myself or tweaked.

Übersicht – desktop widgets / working & planned

These are the current things that are in progress or planned.

RSS Widget: This allows me to easily fetch the latest news from the websites I visit multiple times each day.
You can already find a first version of the widget on Github, forked from Eric Dasque.

I have two widgets currently setup on the left and right of my ultra-wide screen. Gathering information from all my Youtube subscriptions, tech websites and news outlets.

Its using Go for the command line and i rewrote parts to make it completely template-based to allow flexible output variations.
I have some other ideas, but those will make it into future versions. This is still based of the Classic widget architecture, but I also plan to move it to the JSX architecture.
Weather widget for Openweather: Straight forward Openweather widget forked from Li Xueli. Displays the current weather and allows to expand to show the next 7 days.
This is build on the new JSX architecture of Übersicht. I did a couple of tweaks and removed the geo-location. Changes will be shared soon.
Fancy Clock / Date / Week
I have a basic version working.
Email: Building a widget that combines IMAP, Gmail and local Mail.
I have a basic version working.
Asana: Pull latest tasks.
A basic version is already working.
Grafana: Dashboard integration
Netdata
Glances
Uptime Monitoring: Uptime Kuma / UptimeRobot / Statping
Cloudflare: Stats
MQTT / Node-Red / N8N

portalZINE NMN | Development meets Creativity | uebersicht weather

portalZINE NMN | Development meets Creativity | uebersicht rss

xbar – Extend Menu Bar / working & planned

Nothing to share yet ….

4. Juni 2019

Cron / Crontab Tips Collection

I will use this article to collect interesting tips and tricks about using the Linux cron. This is not so much about setting up a cron, but about little things I use or discovered!

What is a cron ?

The cron daemon is a long-running process that executes commands at specific dates and times. You can use this to schedule activities, either as one-time events or as recurring tasks.

What is the crontab?

For commands that need to be executed repeatedly (e.g., hourly, daily, or weekly), you can use the crontab command. The crontab command creates a crontab file containing commands and instructions for the cron daemon to execute.

Format is: MIN HOUR DOM MON DOW CMD
Minute field
Hour field
Day of month
Day of week
Command

crontab -l    		# Viewing the cronjobs as currently logged in user 
crontab -e    		# Edit the cronjob for currently logged in user
crontab -l -u $USER 	# View the cronjob for the specified user 
crontab -e -u $USER	$ Edit the cronjob for the specified user

crontab -l # Viewing the cronjobs as currently logged in user

crontab -e # Edit the cronjob for currently logged in user

crontab -l -u $USER # View the cronjob for the specified user

crontab -e -u $USER $ Edit the cronjob for the specified user

Run every 5 minutes

*/5 * * * *  /home/reggaenights/script.sh

1	/5 * * * /home/reggaenights/script.sh

Run yearly, monthly, weekly, daily or on reboot.
@yearly will run at 00:00 on Jan 1st for every year.
@monthly will run at 00:00 on 1st of every month.
@weekly will run at 00:00 on starting of every week.
@daily will run at 00:00 on every day.
@reboot will run after the server has been rebooted

@yearly  	/home/reggaenights/script.sh	
@monthly 	/home/reggaenights/script.sh
@weekly		/home/reggaenights/script.sh
@daily  	/home/reggaenights/script.sh

@yearly /home/reggaenights/script.sh

@monthly /home/reggaenights/script.sh

@weekly /home/reggaenights/script.sh

@daily /home/reggaenights/script.sh

TIPS

1. Send cron output via email

*/30 * * * * /bin/bash /cleanup | /usr/bin/mail -s "Notify me" your@email.org

1	/30 * * * /bin/bash /cleanup \| /usr/bin/mail -s "Notify me" your@email.org

2. Use a real cron for WordPress

A real cron does not rely on website activity and executes independently.

*/30 * * * * /usr/bin/wget -q -O - https://yourwordpress.org/wp-cron.php?doing_wp_cron

1	/30 * * * /usr/bin/wget -q -O - https://yourwordpress.org/wp-cron.php?doing_wp_cron

Do not forget to disable the virtual WordPress Cron in the wp-config.php!

define('DISABLE_WP_CRON', true);

1	define('DISABLE_WP_CRON', true);

3. Prevent Emails being sent, when cron executes > /dev/null 2>&1

*/30 * * * * /usr/bin/wget -q -O - https://yourcrone.org/wp-cron.php?doing_wp_cron >/dev/null 2>&amp;1

1	/30 * * * /usr/bin/wget -q -O - https://yourcrone.org/wp-cron.php?doing_wp_cron >/dev/null 2>&1

4. Set Standard Variables

# Email to send output to
MAILTO="a@b.com,b@b.com"

# Setup your path for reuse
PATH="/usr/bin:/sbin:/bin"

# Tells which directory the cron should execute the crontab commands from
HOME="/path/to/app/root"

#Set the default shell
SHELL="/bin/bash"

# Email to send output to

MAILTO="a@b.com,b@b.com"

# Setup your path for reuse

PATH="/usr/bin:/sbin:/bin"

# Tells which directory the cron should execute the crontab commands from

HOME="/path/to/app/root"

#Set the default shell

SHELL="/bin/bash"

5. Output Redirection

*/15 * * * * /home/reggaenights/script.sh >> /home/collect/cron/output/pipe.log 2>&amp;1

1	/15 * * * /home/reggaenights/script.sh >> /home/collect/cron/output/pipe.log 2>&1

TOOLS

Crontab UI (NodeJS) – Easy way to edit your crontab visually. @Github
Chronis ( >= PHP 7) – Chronis will help you define cron jobs using natural language / YAML and will generate the crontab files for you. @Github
PHP Cron Expression Parser – Standard (V7) compliant crontab expression parser/validator with support for time zones. @Github
PhpGt/Cron (PHP) – Define background jobs in standard crontab format and the Cron Runner will execute them when they are due. Jobs can be either normal scripts, or calls to static functions with automatic autoloading taken care of. @Github
Cronicle (NodeJS) – A simple, distributed task scheduler and runner with a web based UI. @GitHub / Website

26. Februar 2016

Structure – IoT platform that connects devices and data

Structure opened its doors a couple of days ago.

Structure offers a simple and powerful IoT cloud platform for developing the next generation of connected experiences. They offer device management with robust data visualization that reacts in real-time.

They have a nice drag & drop workflow interface that allows you to forward data coming in, combine data or just store it.

I will be testing a builder kit with the platform, that includes the Adafruit Feather Huzzah, which offers native Wifi connectivity. My Raspberry Pi’s will also find their way into the system. The platform allows to consume REST Apis as well, that will make it even more fun to build something unique.

If you are interested in IoT, you should really check it out. Its free :)

Structure / Adafruit Feather Huzzah