Fluffy/website
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2024-12-26 17:36:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix some warnings from Sass, and add more to umami blug

Browse source
This commit is contained in:
Michał 2024-11-08 14:44:40 +00:00
parent ec8ba60242
commit ca461f3a21
14 changed files with 152 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
package-lock.json generated
View file

@ -14,7 +14,8 @@
"typescript": "^5.6.3" "typescript": "^5.6.3"
}, },
"devDependencies": { "devDependencies": {
"sass": "^1.80.6" "sass": "^1.80.6",
"sass-migrator": "^2.2.1"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
@ -6149,6 +6150,19 @@
"@parcel/watcher": "^2.4.1" "@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": { "node_modules/section-matter": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",

3
package.json
View file

@ -16,6 +16,7 @@
"typescript": "^5.6.3" "typescript": "^5.6.3"
}, },
"devDependencies": { "devDependencies": {
"sass": "^1.80.6" "sass": "^1.80.6",
"sass-migrator": "^2.2.1"
} }
} }

4
src/components/Note.astro
View file

@ -29,6 +29,10 @@ const { text } = Astro.props;
background-color: $accent; background-color: $accent;
color: $light; color: $light;
> svg {
min-width: 24px;
}
> span { > span {
padding-left: 8px; padding-left: 8px;
} }

139
src/content/posts/2024_11_07-umami.mdx
View file

@ -1,5 +1,5 @@
--- ---
draft: true draft: false
title: umami title: umami
description: Goob bye Plausible description: Goob bye Plausible
pubDate: 2024-11-07 pubDate: 2024-11-07
@ -12,9 +12,22 @@ tags:
import Note from "../../components/Note.astro"; 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 ### 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 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 <Note text="Blank sections are due to me not being able to find information on the feature" />
specifically looked for.
| | Matomo | PostHog | umami | Fathom | Plausible | | | Matomo | PostHog | umami | Fathom lite | Plausible |
| ----------------------------- | ------ | ------- | --------------- | -------- | --------- | |-------------------------------|--------|----------------------------|-----------------------------|------------------------------|----------------------------|
| Self-Hostable | Yes | Yes | Yes | Yes [^1] | Yes | | Self-Hostable | Yes | Yes | Yes | Yes [^fathom-self-host] | Yes |
| Hosting method | PHP | Docker | Node or Docker | Go [^2] | Docker | | Hosting method | PHP | Docker | Node or Docker | Go [^fathom-language] | Docker |
| GDPR compliant | Yes | Yes | Yes | Yes [^3] | Yes | | GDPR compliant | Yes | Yes | Yes | No [^fathom-gdpr-compliance] | Yes |
| Email reports | Yes | Yes | | | Yes | | Email reports | Yes | Yes | | | Yes |
| Tracking events | Yes | Yes | Yes [^4] | | No | | Tracking events | Yes | Yes | Yes [^umami-event-tracking] | | No |
| Simple (and pretty) dashboard | No | Mostly | Yes | Yes | Yes | | Simple (and pretty) dashboard | No | Mostly | Yes | Yes | Yes |
| Minimum RAM | 1GB | 8GB | 512MB [^5] | | 1GB | | Minimum RAM | 1GB | 8GB | 256MB [^umamo-memory-usage] | | 1GB |
| Supported Databases | MySQL | | Postgres, MySQL | SQLite | | | Supported Databases | MySQL | N/A [^supported-databases] | Postgres or MySQL | SQLite | N/A [^supported-databases] |
[^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" />
## So what was wrong with Plausible? ## 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 ## 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 ### Alpine
@ -112,11 +116,8 @@ apk add vim git
### Caddy ### 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 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 caddy anyway. It was quite simple really
```bash ```bash
apk add caddy apk add caddy
rc-update add caddy rc-update add caddy
@ -126,69 +127,41 @@ rc-service caddy start
mkdir /var/www/html mkdir /var/www/html
``` ```
Then, in `/etc/caddy`, we edit the `Caddyfile` 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
```bash
cd /etc/caddy
vim Caddyfile
```
And add the following
```caddyfile ```caddyfile
:8080 { :8080
reverse_proxy localhost:3000 reverse_proxy localhost:3000
}
``` ```
<Note text="3000 is the default port for yarn, but adjust for your needs" />
And finally And finally we just need to reload the service, still within `/etc/caddy`, with `caddy reload`!
```bash
# While still in /etc/caddy
caddy reload
```
### Postgres ### Postgres
It was slightly more manual than it is usually on ubuntu, but this is a great guide that still is relative 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)
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 <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" />
CREATE DATABASE umami;
```
### Installing umami ### Installing umami
The [official documentation](https://umami.is/docs/install) is the nicest, but there is some extra stuff you need todo The [official documentation](https://umami.is/docs/install) is the nicest, but there is some extra stuff you need todo
outside-of their tutorial outside-of their tutorial
Firstly we make the required directory and clone the project Firstly we make the required directory and clone the project `mkdir /var/www/html`
```bash
mkdir /var/www/html
```
<Note text="Before you go any further, follow the official documentation, then come back :3" /> <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, 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
OpenRC! 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
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
```bash ```bash
#!/sbin/openrc-run #!/sbin/openrc-run
@ -237,14 +210,28 @@ rc-update add umami
rc-service umami start 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! > 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 ```js
localStorage.setItem("umami.disabled", 1); 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 :(

1
src/layouts/Layout.astro
View file

@ -56,6 +56,7 @@ const address = import.meta.env.PUBLIC_ADDRESS;
in the JS console (without the quotation marks). in the JS console (without the quotation marks).
--> -->
<script <script
is:inline
defer defer
src="https://umami.leggy.dev/script.js" src="https://umami.leggy.dev/script.js"
data-website-id="e8c4fb4f-6ff2-4179-8873-957d635c862c" data-website-id="e8c4fb4f-6ff2-4179-8873-957d635c862c"

8
src/styles/_button.scss
View file

@ -1,3 +1,5 @@
@use "vars";
.button { .button {
padding: 0 20px; padding: 0 20px;
@ -18,8 +20,8 @@
border-radius: 9999px; border-radius: 9999px;
border: 0 solid transparent; border: 0 solid transparent;
background-color: rgba($light, 0.04); background-color: rgba(vars.$light, 0.04);
color: $light; color: vars.$light;
overflow: hidden; overflow: hidden;
@ -34,7 +36,7 @@
left: 0; left: 0;
border-radius: 9999px; border-radius: 9999px;
background-color: rgba($accent, 0.13); background-color: rgba(vars.$accent, 0.13);
opacity: 0; opacity: 0;
transform: scaleX(0%); transform: scaleX(0%);

12
src/styles/_certificate.scss
View file

@ -1,3 +1,5 @@
@use "vars";
.certificate { .certificate {
padding: 16px; padding: 16px;
@ -5,10 +7,10 @@
position: relative; position: relative;
border-radius: $radius; border-radius: vars.$radius;
border: 2px solid $gray; border: 2px solid vars.$gray;
background-color: $dark; background-color: vars.$dark;
color: $light; color: vars.$light;
overflow: hidden; overflow: hidden;
@ -42,7 +44,7 @@
margin: calc(16px - 4px) 0; margin: calc(16px - 4px) 0;
border: 0 solid transparent; border: 0 solid transparent;
border-bottom: 2px solid $gray; border-bottom: 2px solid vars.$gray;
} }
> .pill-list { > .pill-list {

12
src/styles/_header.scss
View file

@ -1,3 +1,5 @@
@use "vars";
.header { .header {
margin: -32px -32px 32px; margin: -32px -32px 32px;
padding: 32px; padding: 32px;
@ -6,8 +8,8 @@
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
border-bottom: 2px solid $gray; border-bottom: 2px solid vars.$gray;
background-color: $dark; background-color: vars.$dark;
z-index: 999; z-index: 999;
@ -42,8 +44,8 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
border-bottom: 2px solid $gray; border-bottom: 2px solid vars.$gray;
background-color: $dark; background-color: vars.$dark;
color: $light; color: vars.$light;
} }
} }

12
src/styles/_main.scss
View file

@ -1,3 +1,5 @@
@use "vars";
main { main {
margin: 200px auto 0; margin: 200px auto 0;
padding: 32px; padding: 32px;
@ -11,11 +13,11 @@ main {
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
border-top-left-radius: $radius; border-top-left-radius: vars.$radius;
border-top-right-radius: $radius; border-top-right-radius: vars.$radius;
border: 2px solid $gray; border: 2px solid vars.$gray;
border-bottom: 0 solid transparent; border-bottom: 0 solid transparent;
background-color: $dark; background-color: vars.$dark;
box-shadow: 0 8px 8px rgba(#000, 0.3); box-shadow: 0 8px 8px rgba(#000, 0.3);
z-index: 10; z-index: 10;
@ -28,6 +30,6 @@ main {
margin: 32px 0; margin: 32px 0;
border: 0 solid transparent; border: 0 solid transparent;
border-bottom: 2px solid $gray; border-bottom: 2px solid vars.$gray;
} }
} }

8
src/styles/_music.scss
View file

@ -1,3 +1,5 @@
@use "vars";
#music { #music {
padding: 20px; padding: 20px;
@ -14,10 +16,10 @@
text-decoration: none; text-decoration: none;
font-size: 16px; font-size: 16px;
border-radius: $radius; border-radius: vars.$radius;
&:before { &:before {
border-radius: $radius; border-radius: vars.$radius;
} }
.music-bg { .music-bg {
@ -41,7 +43,7 @@
width: 80px; width: 80px;
height: 80px; height: 80px;
border-radius: $radius; border-radius: vars.$radius;
object-fit: cover; object-fit: cover;
z-index: +2; z-index: +2;

12
src/styles/_pill.scss
View file

@ -1,3 +1,5 @@
@use "vars";
.pill { .pill {
padding: 0 10px; padding: 0 10px;
@ -12,9 +14,9 @@
font-size: 13px; font-size: 13px;
border-radius: 99999px; border-radius: 99999px;
border: 2px solid rgba($light, 0.04); border: 2px solid rgba(vars.$light, 0.04);
background-color: $dark; background-color: vars.$dark;
color: $light; color: vars.$light;
list-style: none; list-style: none;
@ -42,8 +44,8 @@ button.pill {
&:hover, &:hover,
&:focus-visible { &:focus-visible {
border: 2px solid $accent; border: 2px solid vars.$accent;
background-color: rgba($accent, 0.1); background-color: rgba(vars.$accent, 0.1);
outline: 0 solid transparent; outline: 0 solid transparent;
} }
} }

26
src/styles/_reset.scss
View file

@ -1,31 +1,33 @@
@use "vars";
*, *,
*::before, *::before,
*::after { *::after {
margin: 0; margin: 0;
padding: 0; padding: 0;
scrollbar-color: $accent transparent; box-sizing: border-box;
::-webkit-scrollbar {
scrollbar-color: vars.$accent transparent;
&::-webkit-scrollbar {
width: 8px; width: 8px;
} }
::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: $accent; background: vars.$accent;
} }
::-webkit-scrollbar-thumb:hover { &::-webkit-scrollbar-thumb:hover {
background: $accent; background: vars.$accent;
} }
box-sizing: border-box;
} }
html { html {
min-height: 100vh; min-height: 100vh;
font-size: 100%; font-size: 100%;
font-family: $font-regular; font-family: vars.$font-regular;
font-weight: 420; font-weight: 420;
line-height: 1.5; line-height: 1.5;
@ -43,7 +45,7 @@ body {
flex-direction: column; flex-direction: column;
background-color: #261f1b; background-color: #261f1b;
color: $light; color: vars.$light;
} }
h1, h1,
@ -62,7 +64,7 @@ ol[role="list"] {
code *, code *,
pre * { pre * {
font-family: $font-mono !important; font-family: vars.$font-mono !important;
} }
img, img,

4
src/styles/_section.scss
View file

@ -1,3 +1,5 @@
@use "vars";
.section { .section {
padding-bottom: 32px; padding-bottom: 32px;
@ -10,7 +12,7 @@
} }
> img { > img {
border-radius: $radius; border-radius: vars.$radius;
} }
&:last-of-type { &:last-of-type {

24
src/styles/styles.scss
View file

@ -1,13 +1,13 @@
@import "vars"; @use "vars";
@import "reset"; @use "reset";
@import "main"; @use "main";
@import "banner"; @use "banner";
@import "header"; @use "header";
@import "section"; @use "section";
@import "button"; @use "button";
@import "pill"; @use "pill";
@import "pill_list"; @use "pill_list";
@import "project_list"; @use "project_list";
@import "music"; @use "music";
@import "certificate"; @use "certificate";