Added seo tags & small improvements

This commit is contained in:
Filip Znachor 2023-11-07 00:19:52 +01:00
parent 5a14e6b7f4
commit 9b9b9866c0
12 changed files with 35 additions and 23 deletions

View file

@ -1,4 +1,4 @@
<img src="./public/icon.webp" width="120px" alt="Uptime Status logo">
<img src="./public/icon/success.webp" width="120px" alt="Uptime Status logo">
# Uptime Status

View file

@ -12,13 +12,14 @@ function globalstatus() {
}
function statusicon() {
return new \Twig\TwigFilter('statusicon', function (int $status) {
$icons = [
0 => "error",
1 => "success",
2 => "warning",
3 => "maintenance"
];
return "/icon/{$icons[$status]}.svg";
return new \Twig\TwigFilter('statusicon', function (int $status, string $suffix = "svg") {
$icons = ["error", "success", "warning", "maintenance"];
return "/icon/{$icons[$status]}.$suffix";
});
}
function statuscolor() {
return new \Twig\TwigFilter('statuscolor', function (int $status) {
return ["#F87171", "#10B981", "#FFBB6D", "#9575cd"][$status];
});
}

View file

@ -36,6 +36,7 @@ class UptimeStatus {
$twig->addFilter(\Filters\globalstatus());
$twig->addFilter(\Filters\statusicon());
$twig->addFilter(\Filters\statuscolor());
$locale = new \Locale\Locale($this->cfg("default_language"));
$twig->addFilter($locale->t());

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 KiB

BIN
public/icon/error.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
public/icon/success.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
public/icon/warning.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6 KiB

View file

@ -9,10 +9,10 @@
--card-bg-color: 35, 39, 49;
--card-border-color: 33, 36, 45;
--green-color: 16, 185, 129;
--red-color: 248, 113, 113;
--yellow-color: 255, 187, 109;
--blue-color: 149, 117, 205;
--error-color: 248, 113, 113;
--success-color: 16, 185, 129;
--warning-color: 255, 187, 109;
--maintenance-color: 149, 117, 205;
}
@ -240,18 +240,18 @@ footer {
/* STATUS COLORS */
.status-1 {
--color: var(--green-color);
.status-0 {
--color: var(--error-color);
}
.status-0 {
--color: var(--red-color);
.status-1 {
--color: var(--success-color);
}
.status-2 {
--color: var(--yellow-color);
--color: var(--warning-color);
}
.status-3 {
--color: var(--blue-color);
--color: var(--maintenance-color);
}

View file

@ -1,8 +1,7 @@
{% set gs = stats | globalstatus(total) %}
<header class="status-{{ gs }}">
<div class="inner">
<img class="icon" src="{{ gs | statusicon }}" />
<h1>{{ ("header.title." ~ gs) | t }}</h1>
<p>{{ "header.updated" | t({date: now | date}) }}</p>
<h1>{{ title }}</h1>
<p>{{ update }}</p>
</div>
</header>

View file

@ -1,3 +1,7 @@
{% set gs = stats | globalstatus(total) %}
{% set icon = gs | statusicon("webp") %}
{% set update = "header.updated" | t({date: now | date}) %}
{% set title = ("header.title." ~ gs) | t %}
<!DOCTYPE html>
<html lang="en">
<head>
@ -5,7 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="/style.css">
<link rel="icon" href="/icon.webp" type="image/webp">
{{ include("seo.twig") }}
</head>
<body>
{{ include("./header.twig") }}

7
view/seo.twig Normal file
View file

@ -0,0 +1,7 @@
<link rel="icon" href="{{ icon }}" type="image/webp">
<meta name="theme-color" content="{{ gs | statuscolor }}">
<meta name="description" content="{{ title }} | {{ update }}">
<meta property="og:site_name" content="{{ page.title }}">
<meta property="og:title" content="{{ title }}">
<meta property="og:description" content="{{ update }}">
<meta property="og:image" content="{{ icon }}">