mirror of
https://github.com/Fluffy-Bean/website.git
synced 2024-12-26 09:26:23 +00:00
Fix some warnings from Sass, and add more to umami blug
This commit is contained in:
parent
ec8ba60242
commit
ca461f3a21
16
package-lock.json
generated
16
package-lock.json
generated
|
|
@ -14,7 +14,8 @@
|
|||
"typescript": "^5.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.80.6"
|
||||
"sass": "^1.80.6",
|
||||
"sass-migrator": "^2.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
|
|
@ -6149,6 +6150,19 @@
|
|||
"@parcel/watcher": "^2.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/sass-migrator": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/sass-migrator/-/sass-migrator-2.2.1.tgz",
|
||||
"integrity": "sha512-Sa2sVC2MeL4cVcEPpd8z/R5/c8LOA0B6K39IGrJl/8WQ24lI1tLF4P8WcQJSCt/lDmJCyOmFGZTC3Rf7/6tVfQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"sass-migrator": "sass-migrator.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/section-matter": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"typescript": "^5.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.80.6"
|
||||
"sass": "^1.80.6",
|
||||
"sass-migrator": "^2.2.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,10 @@ const { text } = Astro.props;
|
|||
background-color: $accent;
|
||||
color: $light;
|
||||
|
||||
> svg {
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
> span {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
draft: true
|
||||
draft: false
|
||||
title: umami
|
||||
description: Goob bye Plausible
|
||||
pubDate: 2024-11-07
|
||||
|
|
@ -12,9 +12,22 @@ tags:
|
|||
|
||||
import Note from "../../components/Note.astro";
|
||||
|
||||
## Why I went with umami
|
||||
## Introduction
|
||||
|
||||
Sike, before we talk about umami, lets talk about some of the other options I had, that I didn't go with
|
||||
This little blog post thang will be about umami, and why I went with it over fixing my Plausible install. While the
|
||||
reason is pretty simple, really and can be summed up in two points.
|
||||
|
||||
- Its resource usage is low
|
||||
- Has (nearly) all the features I used in Plausible
|
||||
|
||||
I want to talk a bit about how I got to the point where I chosen it, and the steps I've taken to actually install and
|
||||
setup an Alpine CT with itttt
|
||||
|
||||
## Other options
|
||||
|
||||
Before I landed on umami, here's the other options I checked out, none of this is gonna really be "scientific", so do
|
||||
some of your own research too, I'll provide links were ever I can, otherwise the information was brought to me in my
|
||||
delusions.
|
||||
|
||||
### Matomo
|
||||
|
||||
|
|
@ -42,29 +55,20 @@ maintained. Which is a shame, as it fathom looked promising and Go is a nice lan
|
|||
|
||||
Maybe I could pick it up in the future, and bring it back to life again
|
||||
|
||||
## Services feature comparison
|
||||
### Services feature comparison
|
||||
|
||||
Blank sections are due to me not being able to find information on said topic, also, features listed are things I
|
||||
specifically looked for.
|
||||
<Note text="Blank sections are due to me not being able to find information on the feature" />
|
||||
|
||||
| | Matomo | PostHog | umami | Fathom | Plausible |
|
||||
| ----------------------------- | ------ | ------- | --------------- | -------- | --------- |
|
||||
| Self-Hostable | Yes | Yes | Yes | Yes [^1] | Yes |
|
||||
| Hosting method | PHP | Docker | Node or Docker | Go [^2] | Docker |
|
||||
| GDPR compliant | Yes | Yes | Yes | Yes [^3] | Yes |
|
||||
| Email reports | Yes | Yes | | | Yes |
|
||||
| Tracking events | Yes | Yes | Yes [^4] | | No |
|
||||
| Simple (and pretty) dashboard | No | Mostly | Yes | Yes | Yes |
|
||||
| Minimum RAM | 1GB | 8GB | 512MB [^5] | | 1GB |
|
||||
| Supported Databases | MySQL | | Postgres, MySQL | SQLite | |
|
||||
|
||||
[^1]: An old and limited version is available, that is no longer maintained
|
||||
[^2]: The self-hosted (lite) version uses Go, the paid version uses [Laravel](https://github.com/usefathom/fathom/issues/336#issuecomment-1079549690).
|
||||
[^3]: Fathom is a Canadian based company, and while their servers are also in Canada, [they comply with EU regulations and laws](https://usefathom.com/features/eu-isolation).
|
||||
[^4]: unami doesn't track events automatically [and needs to be setup manually across the website](https://umami.is/docs/track-events).
|
||||
[^5]: unami doesn't list minimum requirements, so far from my testing, this is about what I needed for all my websites. For installs that have higher page visit counts, I imagine more would be needed.
|
||||
|
||||
<Note text="This ain't a scientific featurelist" />
|
||||
| | Matomo | PostHog | umami | Fathom lite | Plausible |
|
||||
|-------------------------------|--------|----------------------------|-----------------------------|------------------------------|----------------------------|
|
||||
| Self-Hostable | Yes | Yes | Yes | Yes [^fathom-self-host] | Yes |
|
||||
| Hosting method | PHP | Docker | Node or Docker | Go [^fathom-language] | Docker |
|
||||
| GDPR compliant | Yes | Yes | Yes | No [^fathom-gdpr-compliance] | Yes |
|
||||
| Email reports | Yes | Yes | | | Yes |
|
||||
| Tracking events | Yes | Yes | Yes [^umami-event-tracking] | | No |
|
||||
| Simple (and pretty) dashboard | No | Mostly | Yes | Yes | Yes |
|
||||
| Minimum RAM | 1GB | 8GB | 256MB [^umamo-memory-usage] | | 1GB |
|
||||
| Supported Databases | MySQL | N/A [^supported-databases] | Postgres or MySQL | SQLite | N/A [^supported-databases] |
|
||||
|
||||
## So what was wrong with Plausible?
|
||||
|
||||
|
|
@ -93,7 +97,7 @@ And here's a dashboard comparison, before umami and Plausible
|
|||
|
||||
## Now onto the fun stuff
|
||||
|
||||
Here's the steps I've taken to setup umami, it's not meant as a tutorial, but hopefully will be helpful regardless...
|
||||
<Note text="As mencioned before, this isn't supposed to be a full tutorial, but the steps I've taken to setup up umami" />
|
||||
|
||||
### Alpine
|
||||
|
||||
|
|
@ -112,11 +116,8 @@ apk add vim git
|
|||
|
||||
### Caddy
|
||||
|
||||
<Note text="3000 is the default port for yarn, but adjust for your needs" />
|
||||
|
||||
I didn't reaaaaaly need caddy for this, as it would mean the service would be behind two proxies, but I wanted to setup
|
||||
caddy anyway. It was quite simple really
|
||||
|
||||
```bash
|
||||
apk add caddy
|
||||
rc-update add caddy
|
||||
|
|
@ -126,69 +127,41 @@ rc-service caddy start
|
|||
mkdir /var/www/html
|
||||
```
|
||||
|
||||
Then, in `/etc/caddy`, we edit the `Caddyfile`
|
||||
|
||||
```bash
|
||||
cd /etc/caddy
|
||||
vim Caddyfile
|
||||
```
|
||||
|
||||
And add the following
|
||||
|
||||
Then, in `/etc/caddy`, we edit the `Caddyfile`, use your favorite editor for this, but I like vim, so for me I would run
|
||||
`vim Caddyfile`. Then set the contents to the following
|
||||
```caddyfile
|
||||
:8080 {
|
||||
reverse_proxy localhost:3000
|
||||
}
|
||||
:8080
|
||||
reverse_proxy localhost:3000
|
||||
```
|
||||
<Note text="3000 is the default port for yarn, but adjust for your needs" />
|
||||
|
||||
And finally
|
||||
|
||||
```bash
|
||||
# While still in /etc/caddy
|
||||
caddy reload
|
||||
```
|
||||
And finally we just need to reload the service, still within `/etc/caddy`, with `caddy reload`!
|
||||
|
||||
### Postgres
|
||||
|
||||
It was slightly more manual than it is usually on ubuntu, but this is a great guide that still is relative
|
||||
https://luppeng.wordpress.com/2020/02/28/install-and-start-postgresql-on-alpine-linux/
|
||||
It was slightly more manual than I'm used to on Ubuntu, but I found [a great guide by luppeng](https://luppeng.wordpress.com/2020/02/28/install-and-start-postgresql-on-alpine-linux)
|
||||
that is still up-to-date as of writing this.
|
||||
|
||||
Then I just needed to make a database with a simple command.
|
||||
Then I just needed to get into the database with `psql -U postgres` and run `CREATE DATABASE umami;`.
|
||||
|
||||
```sql
|
||||
CREATE DATABASE umami;
|
||||
```
|
||||
<Note text="Creating a user specific to this service, along with setting correct network permissions, would be the safest, but you can figure that out" />
|
||||
|
||||
### Installing umami
|
||||
|
||||
The [official documentation](https://umami.is/docs/install) is the nicest, but there is some extra stuff you need todo
|
||||
outside-of their tutorial
|
||||
|
||||
Firstly we make the required directory and clone the project
|
||||
|
||||
```bash
|
||||
mkdir /var/www/html
|
||||
```
|
||||
Firstly we make the required directory and clone the project `mkdir /var/www/html`
|
||||
|
||||
<Note text="Before you go any further, follow the official documentation, then come back :3" />
|
||||
|
||||
### Setting up umami as a service
|
||||
Now we're gonna set umami as a service! [They have a guide on doing that with PM2](https://umami.is/docs/install#running-umami),
|
||||
but I prefer to use system native stuff, most likely for you this would be `systemd`, but if you're following along,
|
||||
we'll be using `openrc`
|
||||
|
||||
While umami has a section on turning the project into a service, I prefer using what's already on the system for this,
|
||||
OpenRC!
|
||||
|
||||
Making a service on OpenRC is actually quite simple,
|
||||
[they have a guide for making services too](https://github.com/OpenRC/openrc/blob/master/service-script-guide.md).
|
||||
|
||||
First, make a user for the service, such as `umami`. Then run the following command to make, and edit, a file for the
|
||||
service
|
||||
|
||||
```bash
|
||||
touch /etc/init.d/umami
|
||||
vim /etc/init.d/umami
|
||||
```
|
||||
|
||||
And enter the following
|
||||
Making a service on OpenRC is actually quite simple,[they have a guide for making services too](https://github.com/OpenRC/openrc/blob/master/service-script-guide.md). But first, make a
|
||||
user for the service, such as `umami`. Next, we must make a file in `/etc/init.d`, such as `/etc/init.d/umami`. You can
|
||||
do this by simply running `vim /etc/init.d/umami` that'll create and open the file for you. Then enter the following
|
||||
|
||||
```bash
|
||||
#!/sbin/openrc-run
|
||||
|
|
@ -237,14 +210,28 @@ rc-update add umami
|
|||
rc-service umami start
|
||||
```
|
||||
|
||||
And we're done! You may also now notice new text on the bottom of the page
|
||||
And we're done! Depending on your network setup, and if you used caddy or not, you should be able to visit the page from
|
||||
something like `192.168.0.0:8000`, the default login is `admin`, `umami`.
|
||||
|
||||
## Some thoughts
|
||||
|
||||
You may also now notice new text on the bottom of the page
|
||||
|
||||
> This website tracks anonymous analytics. To see them in action visit umami.leggy.dev!
|
||||
|
||||
If you really don't like the idea of your visit being counted, run
|
||||
So far, I really enjoyed using umami, it's a nice project! But if you really don't like the idea of your visit being
|
||||
counted, just paste the following into the JS console of your browser.
|
||||
|
||||
```js
|
||||
localStorage.setItem("umami.disabled", 1);
|
||||
```
|
||||
|
||||
In the browser console to remove all future visit counts.
|
||||
All following visits will no-longer be counted. While I'd prefer your _not_ to remove yourself from the statistics, as
|
||||
they're useful to me, you have the option to now.
|
||||
|
||||
[^fathom-self-host]: The paid version, that most people are probably know about, isn't self-hostable
|
||||
[^fathom-language]: The self-hosted (lite) version uses Go, the paid version uses [Laravel](https://github.com/usefathom/fathom/issues/336#issuecomment-1079549690).
|
||||
[^fathom-gdpr-compliance]: The paid version of Fathom [does comply, through their isolation layer](https://usefathom.com/features/eu-isolation), the lite version does not guarantee this.
|
||||
[^umami-event-tracking]: unami doesn't track events automatically [and needs to be setup manually across the website](https://umami.is/docs/track-events).
|
||||
[^umamo-memory-usage]: unami doesn't list minimum requirements, so far from my testing, this is about what I needed for all my websites. For installs that have higher page visit counts, I imagine more would be needed.
|
||||
[^supported-databases]: The service is run within Docker containers, so I don't get to choose what database I can actually use :(
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ const address = import.meta.env.PUBLIC_ADDRESS;
|
|||
in the JS console (without the quotation marks).
|
||||
-->
|
||||
<script
|
||||
is:inline
|
||||
defer
|
||||
src="https://umami.leggy.dev/script.js"
|
||||
data-website-id="e8c4fb4f-6ff2-4179-8873-957d635c862c"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "vars";
|
||||
|
||||
.button {
|
||||
padding: 0 20px;
|
||||
|
||||
|
|
@ -18,8 +20,8 @@
|
|||
|
||||
border-radius: 9999px;
|
||||
border: 0 solid transparent;
|
||||
background-color: rgba($light, 0.04);
|
||||
color: $light;
|
||||
background-color: rgba(vars.$light, 0.04);
|
||||
color: vars.$light;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -34,7 +36,7 @@
|
|||
left: 0;
|
||||
|
||||
border-radius: 9999px;
|
||||
background-color: rgba($accent, 0.13);
|
||||
background-color: rgba(vars.$accent, 0.13);
|
||||
|
||||
opacity: 0;
|
||||
transform: scaleX(0%);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "vars";
|
||||
|
||||
.certificate {
|
||||
padding: 16px;
|
||||
|
||||
|
|
@ -5,10 +7,10 @@
|
|||
|
||||
position: relative;
|
||||
|
||||
border-radius: $radius;
|
||||
border: 2px solid $gray;
|
||||
background-color: $dark;
|
||||
color: $light;
|
||||
border-radius: vars.$radius;
|
||||
border: 2px solid vars.$gray;
|
||||
background-color: vars.$dark;
|
||||
color: vars.$light;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -42,7 +44,7 @@
|
|||
margin: calc(16px - 4px) 0;
|
||||
|
||||
border: 0 solid transparent;
|
||||
border-bottom: 2px solid $gray;
|
||||
border-bottom: 2px solid vars.$gray;
|
||||
}
|
||||
|
||||
> .pill-list {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "vars";
|
||||
|
||||
.header {
|
||||
margin: -32px -32px 32px;
|
||||
padding: 32px;
|
||||
|
|
@ -6,8 +8,8 @@
|
|||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
border-bottom: 2px solid $gray;
|
||||
background-color: $dark;
|
||||
border-bottom: 2px solid vars.$gray;
|
||||
background-color: vars.$dark;
|
||||
|
||||
z-index: 999;
|
||||
|
||||
|
|
@ -42,8 +44,8 @@
|
|||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
border-bottom: 2px solid $gray;
|
||||
background-color: $dark;
|
||||
color: $light;
|
||||
border-bottom: 2px solid vars.$gray;
|
||||
background-color: vars.$dark;
|
||||
color: vars.$light;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "vars";
|
||||
|
||||
main {
|
||||
margin: 200px auto 0;
|
||||
padding: 32px;
|
||||
|
|
@ -11,11 +13,11 @@ main {
|
|||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
border-top-left-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
border: 2px solid $gray;
|
||||
border-top-left-radius: vars.$radius;
|
||||
border-top-right-radius: vars.$radius;
|
||||
border: 2px solid vars.$gray;
|
||||
border-bottom: 0 solid transparent;
|
||||
background-color: $dark;
|
||||
background-color: vars.$dark;
|
||||
|
||||
box-shadow: 0 8px 8px rgba(#000, 0.3);
|
||||
z-index: 10;
|
||||
|
|
@ -28,6 +30,6 @@ main {
|
|||
margin: 32px 0;
|
||||
|
||||
border: 0 solid transparent;
|
||||
border-bottom: 2px solid $gray;
|
||||
border-bottom: 2px solid vars.$gray;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "vars";
|
||||
|
||||
#music {
|
||||
padding: 20px;
|
||||
|
||||
|
|
@ -14,10 +16,10 @@
|
|||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
|
||||
border-radius: $radius;
|
||||
border-radius: vars.$radius;
|
||||
|
||||
&:before {
|
||||
border-radius: $radius;
|
||||
border-radius: vars.$radius;
|
||||
}
|
||||
|
||||
.music-bg {
|
||||
|
|
@ -41,7 +43,7 @@
|
|||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
border-radius: $radius;
|
||||
border-radius: vars.$radius;
|
||||
|
||||
object-fit: cover;
|
||||
z-index: +2;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "vars";
|
||||
|
||||
.pill {
|
||||
padding: 0 10px;
|
||||
|
||||
|
|
@ -12,9 +14,9 @@
|
|||
font-size: 13px;
|
||||
|
||||
border-radius: 99999px;
|
||||
border: 2px solid rgba($light, 0.04);
|
||||
background-color: $dark;
|
||||
color: $light;
|
||||
border: 2px solid rgba(vars.$light, 0.04);
|
||||
background-color: vars.$dark;
|
||||
color: vars.$light;
|
||||
|
||||
list-style: none;
|
||||
|
||||
|
|
@ -42,8 +44,8 @@ button.pill {
|
|||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
border: 2px solid $accent;
|
||||
background-color: rgba($accent, 0.1);
|
||||
border: 2px solid vars.$accent;
|
||||
background-color: rgba(vars.$accent, 0.1);
|
||||
outline: 0 solid transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,33 @@
|
|||
@use "vars";
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
scrollbar-color: $accent transparent;
|
||||
::-webkit-scrollbar {
|
||||
box-sizing: border-box;
|
||||
|
||||
scrollbar-color: vars.$accent transparent;
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $accent;
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: vars.$accent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: $accent;
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: vars.$accent;
|
||||
}
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100vh;
|
||||
|
||||
font-size: 100%;
|
||||
font-family: $font-regular;
|
||||
font-family: vars.$font-regular;
|
||||
font-weight: 420;
|
||||
line-height: 1.5;
|
||||
|
||||
|
|
@ -43,7 +45,7 @@ body {
|
|||
flex-direction: column;
|
||||
|
||||
background-color: #261f1b;
|
||||
color: $light;
|
||||
color: vars.$light;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -62,7 +64,7 @@ ol[role="list"] {
|
|||
|
||||
code *,
|
||||
pre * {
|
||||
font-family: $font-mono !important;
|
||||
font-family: vars.$font-mono !important;
|
||||
}
|
||||
|
||||
img,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "vars";
|
||||
|
||||
.section {
|
||||
padding-bottom: 32px;
|
||||
|
||||
|
|
@ -10,7 +12,7 @@
|
|||
}
|
||||
|
||||
> img {
|
||||
border-radius: $radius;
|
||||
border-radius: vars.$radius;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
@import "reset";
|
||||
@import "main";
|
||||
@import "banner";
|
||||
@import "header";
|
||||
@import "section";
|
||||
@import "button";
|
||||
@import "pill";
|
||||
@import "pill_list";
|
||||
@import "project_list";
|
||||
@import "music";
|
||||
@import "certificate";
|
||||
@use "reset";
|
||||
@use "main";
|
||||
@use "banner";
|
||||
@use "header";
|
||||
@use "section";
|
||||
@use "button";
|
||||
@use "pill";
|
||||
@use "pill_list";
|
||||
@use "project_list";
|
||||
@use "music";
|
||||
@use "certificate";
|
||||
|
|
|
|||
Loading…
Reference in a new issue