gothseidank/labertasche
1
0
Fork 0
Code Issues 3 Pull Requests Projects 1 Releases Wiki Activity

Corrections and improvements

Browse Source
This commit is contained in:
Domeniko Gentner 2020-11-26 22:27:09 +01:00
parent c630472a75
commit b92e179584
1 changed files with 37 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
README.md
View File

@ -14,13 +14,28 @@ A comment system for Hugo, written in Python (and Javascript).
* EMail Blocklist
* Only outputs JSON, so templates can be done independently, enhancing customization. Using the comments via a partial
template in Hugo is the recommended way. See below for integration code.
* Antispam
* Email Validation
## Requirements
* A public webserver capable of running Apache/NGINX and/or gunicorn. This server does not need to be the same as the
* A public webserver capable of running Python, Apache/NGINX and/or gunicorn. This server does not need to be the same as the
server running the site, but it must have access to your CI/CD chain. Same server is of course easier to implement.
## Depdencies
* Python 3.8
* flask
* flask-cors
* flask-sqlalchemy
* flask-login
* antispam
* pyyaml
* requests
* py3-validate-email
* Recommended OS: Ubuntu 20, Debian Buster
* Recommended Server Software: Apache with libmodwsgi for Python 3
* GoHugo, but the json can also be used by Javascript and other languages
## How does it work?
@ -34,7 +49,7 @@ template.
## Setup
Run `ssh://git@git.tuxstash.de:1235/gothseidank/labertasche.git` in the directory where you wish to host the comment
Run `git clone ssh://git@git.tuxstash.de:1235/gothseidank/labertasche.git` in the directory where you wish to host the comment
system. For example, `/var/www/html`, I also recommend making use of `/srv/` or `/opt/`. It depends on you.
When everything is downloaded, create the directory `/etc/labertasche`. In this directory, we need 2 files:
@ -43,14 +58,14 @@ When everything is downloaded, create the directory `/etc/labertasche`. In this
* mail_credentials.json - you can find an example in the root directory.
Copy these files from the root directory of this app to the folder `/etc/labertasche`. Make sure to set ownership for
your user that runs your server later. I always do `chmown user:www-data`, so Apache has only group rights and enable read-only
for the Apache user.
your user that runs your server later. I always do `chown user:www-data`, so Apache has only group rights and enable read-only
for the Apache user. I also recommend `chmod 700` for the directory and `chmod 600` for the files.
Make sure to read the config and replace the values as needed. The mail configuration should need no explanation,
`labertasche.yaml` has comments. Feel free to bug about more documentation regarding this. Pay special attention to
`labertasche.yaml` has comments. Feel free to bug me about more documentation regarding this. Pay special attention to
secrets and passwords.
Now, for the server there are several options. I personally always host flask apps with Apache and mod_wsgi.
Now, for the server there are several options. I personally always host flask apps with Apache and libmodwsgi.
The config looks like this:
* [Apache](docs/apache-config.md)
@ -65,12 +80,12 @@ Once you can see the administrative page, you can start integrating it into Hugo
### Javascript
In the project folder is a small javascript file. You will need to load this into Hugo, I suggest using Hugo's asset
pipeline to integrate it into your site. One thing is important to know: this script only does the bare bones post request
to your comment backend. Anything else must be done by yourself, but don't worry: The function is making use of a callback,
so you can control what happens during the various stages.
TODO: Example using the javascript properly
In the project folder is a small javascript file. You will need to add this to Hugo. I suggest using Hugo's asset
pipeline to integrate it into your site and merge it with your current javascript.
One thing is important to know: this script only does the bare bones post request to the comment backend.
Anything else must be done by yourself, such as messages about minimum length etc.
But don't worry: The function is making use of a callback, where you can receive various messages with error codes
and act on them. See the javascript file for an example callback.
### Hugo templates
@ -78,7 +93,8 @@ Remember the `labertasche.yaml` file? It asked you where the data folder of Hugo
various json files into that folder, in folders that describe your sections. So, for each category/section of your blog
where comments can be placed, one folder will be made. And for each page within that section it generates a json file.
Now create a new partial called "comments.html" (or something else). Within that template the following structure is needed:
Now create a new [partial](https://gohugo.io/templates/partials/) called "comments.html" (or something else).
Within that template the following structure is needed:
```
{{ $location := .Scratch.Get "location" }}
@ -113,17 +129,18 @@ Here is a base skeleton to start out:
```
Please take note of the `id` on each element, these are mandatory, as well as the function call for the `onclick` event.
Again, style as needed and add more Javascript to your gusto.
Again, style as needed and add more Javascript to your gusto. Make sure to implement the callback, otherwise the
Javascript will crash.
Inside your template `single.html`, or wherever you want to place comments, you qwill also need this:
Inside your template `single.html`, or wherever you want to place comments, you will also need this:
```
{{ $file := replaceRE "^(.*)[\\/]$" "data$1.json" .Page.RelPermalink }}
{{ .Scratch.Set "location" $file }}
{{ partial "partials/comments" . }}
```
There is no styling needed for this part!
After that and configuring labertasche correctly, the json files should be placed in your data folder and all you got
to do after that, is to rebuild Hugo and the new comment should appear.
@ -152,7 +169,7 @@ Restart=always
WantedBy=multi-user.target
```
`-noChmod` is a very important switch for this, because it stops the server from adjusting the file permissions.
`-noChmod` is a very important switch for this, because it stops Hugo from adjusting the file permissions.
This comes in handy if you have a difference in user and group on your web server. `--cleanDestinationDir` and `--gc`
will clean old files out, so you don't have to worry about synching the public directory with the current content of
your static or assets dir. There will also be no old CSS files be lying around when using fingerprinting.