tmp

app.py

@@ -9,14 +9,7 @@ import blueprints.risdeveau.modules.style
 from flask import Flask
 
 
-app = Flask(
+app = Flask(__name__, static_folder=None, subdomain_matching=True)
-    __name__,
-    static_folder=None,
-    subdomain_matching=True,
-    template_folder="blueprints"
-)
-
-app.jinja_env.add_extension('pypugjs.ext.jinja.PyPugJSExtension')
 
 app.before_request(locale.before_request)
 app.context_processor(locale.inject_translations)

blueprints/risdeveau/__init__.py

@@ -33,11 +33,6 @@ def tmsmp(sec: int) -> str:
         days = round(sec / 86400, 1)
         return f"{days:.0f} d" if days.is_integer() else f"{days:.1f} d"
 
-def utmsmp(unix: int) -> str:
-    return datetime \
-        .utcfromtimestamp(unix) \
-        .strftime('%Y-%m-%d %H:%M:%S')
-
 def rtmsmp(unix: int) -> str:
     return tmsmp(int(time() - unix))
 
@@ -53,7 +48,8 @@ def render_tmpl(filename: str, **kwargs) -> str:
     template_path = os.path.join("risdeveau/templates", filename)
     return minify(
         render_template(template_path, **kwargs),
-        remove_empty_space=True
+        remove_empty_space=True,
+        remove_all_empty_space=True
     )
 
 @bp.route("/static/<path:filename>")
@@ -77,24 +73,31 @@ args = {
     "lb":     lb_data,
     "steam":  steam_data,
     "tmsmp":  tmsmp,
-    "utmsmp": utmsmp,
     "rtmsmp": rtmsmp
 }
 
 @bp.route("/")
 def index():
-    return render_tmpl('index.pug', **args)
+    return render_tmpl('index.html', **args)
 
 @bp.route("/m/<module>")
 def module(module):
-    if none_match := request.headers.get('if-none-match'):
+    if modified_since := request.headers.get('if-modified-since'):
+        modified_since = int(modified_since)
+    none_match = request.headers.get('if-none-match')
+
+    if any((modified_since, none_match)):
         match module:
             case "listenbrainz":
+                if modified_since >= int(lb_data['last_updated']):
+                    return '', 304
                 if none_match == lb_data['etag']:
                     return '', 304
 
             case "steam":
+                if modified_since >= int(steam_data['last_updated']):
+                    return '', 304
                 if none_match == steam_data['etag']:
                     return '', 304
 
-    return render_tmpl(f'{module}.pug', **args)
+    return render_tmpl(f'{module}.htm', **args)

blueprints/risdeveau/modules/api/steam.py

@@ -34,12 +34,13 @@ data = {
 def modify_game_list(json: dict) -> dict:
     if 'games' in json.keys():
         apps = (3301060, 404790, 1281930, 1920960, 1325960, 431960)
-        new_games = []
+        new_games = {}
         for i, g in enumerate(json['games']):
             if g['appid'] not in apps:
                 json['games'][i]['h_cover'] = f"https://shared.fastly.steamstatic.com/store_item_assets//steam/apps/{g['appid']}/header.jpg"
                 json['games'][i]['v_cover'] = f"https://shared.fastly.steamstatic.com/store_item_assets//steam/apps/{g['appid']}/library_600x900.jpg"
-                new_games.append(json['games'][i])
+
+                new_games[g['appid']] = json['games'][i]
         json['games'] = new_games
     return json
 

blueprints/risdeveau/static/script/rtime.js

@@ -65,4 +65,72 @@ document.addEventListener('alpine:init', () => {
       }
     },
   }));
+
+  Alpine.data('steam_rtime', (unixTimestamp) => ({
+    targetDate: new Date(unixTimestamp * 1000),
+    timeString: '',
+    timer: null,
+    interval: 1000,
+
+    colorClasses: {
+      green:  't-green',
+      yellow: 't-yellow',
+      orange: 't-orange',
+      red:    't-red'
+    },
+
+    currentColor: 'green',
+
+    get textColorClass() {
+      return this.colorClasses[this.currentColor];
+    },
+
+    init() {
+      this.updateTime();
+      this.timer = setInterval(() => this.updateTime(), this.interval);
+
+      this.$el.addEventListener('alpine:removing', () => {
+        if (this.interval) clearInterval(this.interval);
+      });
+    },
+
+    updateTime() {
+      const now = new Date();
+      const diffInMinutes = Math.floor((now - this.targetDate) / 60000);
+      const diffInHours = Math.floor(diffInMinutes / 60);
+      const diffInDays = Math.floor(diffInHours / 24);
+      const diffInMonths = Math.floor(diffInDays / 30);
+
+      let newInterval = this.interval;
+
+      if (diffInMinutes < 60) {
+        this.timeString = `${diffInMinutes} m ago`;
+        newInterval = 10000;
+      } else if (diffInHours < 24) {
+        this.timeString = `${diffInHours} h ago`;
+        newInterval = 60000;
+      } else if (diffInDays < 30) {
+        this.timeString = `${diffInDays} d ago`;
+        clearInterval(this.timer);
+      } else {
+        this.timeString = `${diffInMonths} mth ago`;
+        clearInterval(this.timer);
+      }
+
+      if (diffInHours < 12) {
+        this.currentColor = 'green';
+      } else if (diffInDays < 1) {
+        this.currentColor = 'yellow';
+      } else if (diffInMonths < 6) {
+        this.currentColor = 'orange'
+      } else {
+        this.currentColor = 'red';
+      }
+
+      if (this.interval != newInterval) {
+        clearInterval(this.timer)
+        this.timer = setInterval(() => this.updateTime(), newInterval);
+      }
+    },
+  }));
 });

blueprints/risdeveau/static/style/risdeveau.scss

@@ -51,7 +51,27 @@ h3 {
 
 .steam {
   .block {
-    display: flex;
+    &:not(.popup) {
+      display: flex;
+      position: relative;
+      z-index: 1;
+    }
+
+    &.popup {
+      margin-top: -.5rem;
+      padding-top: 1rem;
+      background-color: theme.$mantle;
+      transition: all ease-out 300ms;
+
+      &.enter {}
+
+      &.off {
+        margin-bottom: -.5rem;
+        padding: 0 .5rem;
+        opacity: 0;
+        transform: translateY(-100%);
+      }
+    }
 
     img {
       height: 7rem;

blueprints/risdeveau/templates/88x31.htm

@@ -0,0 +1,16 @@
+<div>
+<div class="88-31">
+  <a href="https://chest.lair.moe" class="disabled">
+    <img src="/static/img/88x31/gf.png"/>
+  </a>
+  <a href="https://preview.about.akarpov.ru" id="pie">
+    <img src="/static/img/88x31/withpie.gif"/>
+  </a>
+</div>
+<div class="88-31">
+  <a href="https://g.lair.moe/Sweetbread/nixos-config">
+    <img src="/static/img/88x31/nixos.webp"/>
+  </a>
+  <img src="/static/img/88x31/teto.webp"/>
+</div>
+</div>

blueprints/risdeveau/templates/88x31.pug

@@ -1,13 +0,0 @@
-div
-  .88-31
-    a.disabled(href="https://chest.lair.moe")
-      img(src="/static/img/88x31/gf.png")
-
-    a#pie(href="https://preview.about.akarpov.ru")
-      img(src="/static/img/88x31/withpie.gif")
-
-  .88-31
-    a(href="https://g.lair.moe/Sweetbread/nixos-config")
-      img(src="/static/img/88x31/nixos.webp")
-
-    img(src="/static/img/88x31/teto.webp")

blueprints/risdeveau/templates/contacts.htm

@@ -0,0 +1,48 @@
+<div class="block">
+  <h3>Development</h3>
+  <div class="blocks badges">
+    <a class="block" href="//g.lair.moe/Sweetbread">
+      <img class="icon" src="/static/icon/service/gitea.webp" />
+      Gitea
+    </a>
+    <a class="block" href="https://github.com/VerySweetBread">
+      <img class="icon" src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" />
+      GitHub
+    </a>
+    <a class="block" href="https://git.kolibrios.org/Sweetbread">
+      <img class="icon" src="https://git.kolibrios.org/assets/img/logo.svg" />
+      KolibriOS Git
+    </a>
+  </div>
+
+  <h3>Contacts</h3>
+  <div class="blocks badges">
+    <a class="block" href="https://matrix.to/#/@risdeveau:codrs.ru">
+      <img class="icon" src="https://matrix.org/assets/favicon.ico" />
+      Matrix
+    </a>
+    <a class="block" href="//b.lair.moe/@risdeveau">
+      <img class="icon" src="/static/icon/service/sharkey.webp" />
+      Fediverse
+    </a>
+    <a class="block" href="https://discord.com/users/459823895256498186">
+      <img class="icon" src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/66e3d80db9971f10a9757c99_Symbol.svg" />
+      Discord
+    </a>
+    <a class="block" href="mailto:risdeveau@lair.moe">
+      Mail
+    </a>
+  </div>
+
+  <h3>Game accounts</h3>
+  <div class="blocks badges">
+    <a class="block" href="https://steamcommunity.com/id/risdeveau">
+      <img class="icon" src="https://store.steampowered.com/favicon.ico" />
+      Steam
+    </a>
+    <a class="block" href="https://gamebanana.com/members/3899828">
+      <img class="icon" src="https://images.gamebanana.com/static/img/favicon/favicon.ico" />
+      GameBanana
+    </a>
+  </div>
+</div>

blueprints/risdeveau/templates/contacts.pug

@@ -1,40 +0,0 @@
-.block
-  h3 Development
-  .blocks.badges
-    a.block(href="//g.lair.moe/Sweetbread")
-      img.icon(src="/static/icon/service/gitea.webp")
-      |  Gitea
-
-    a.block(href="https://github.com/VerySweetBread")
-      img.icon(src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png")
-      |  GitHub
-
-    a.block(href="https://git.kolibrios.org/Sweetbread")
-      img.icon(src="https://git.kolibrios.org/assets/img/logo.svg")
-      |  KolibriOS Git
-
-  h3 Contacts
-  .blocks.badges
-    a.block(href="https://matrix.to/#/@risdeveau:lair.moe")
-      img.icon(src="https://matrix.org/assets/favicon.ico")
-      |  Matrix
-
-    a.block(href="//b.lair.moe/@risdeveau")
-      img.icon(src="/static/icon/service/sharkey.webp")
-      |  Fediverse
-
-    a.block(href="https://discord.com/users/459823895256498186")
-      img.icon(src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/66e3d80db9971f10a9757c99_Symbol.svg")
-      |  Discord
-
-    a.block(href="mailto:risdeveau@lair.moe") Mail
-
-  h3 Game accounts
-  .blocks.badges
-    a.block(href="https://steamcommunity.com/id/risdeveau")
-      img.icon(src="https://store.steampowered.com/favicon.ico")
-      |  Steam
-
-    a.block(href="https://gamebanana.com/members/3899828")
-      img.icon(src="https://images.gamebanana.com/static/img/favicon/favicon.ico")
-      |  GameBanana

blueprints/risdeveau/templates/donate.htm

@@ -0,0 +1,19 @@
+<div>
+<h3>Wallets</h3>
+<div class="blocks qr">
+  <div class="block qr">
+    <p>POL, BNB</p>
+    <img src="/static/img/wallets/evm.webp">
+  </div>
+
+  <div class="block qr">
+    <p>TON</p>
+    <img src="/static/img/wallets/ton.webp">
+  </div>
+
+  <div class="block qr">
+    <p>XMR</p>
+    <img src="/static/img/wallets/xmr.webp">
+  </div>
+</div>
+</div>

blueprints/risdeveau/templates/donate.pug

@@ -1,14 +0,0 @@
-div
-  h3 Wallets
-  .blocks.qr
-    .block.qr
-      p POL, BNB
-      img(src="/static/img/wallets/evm.webp")
-
-    .block.qr
-      p TON
-      img(src="/static/img/wallets/ton.webp")
-
-    .block.qr
-      p XMR
-      img(src="/static/img/wallets/xmr.webp")

blueprints/risdeveau/templates/index.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Sweet Bread</title>
+
+  <link rel="stylesheet" href="/static/style/tw.css">
+  <link rel="stylesheet" href="/static/style/main.css">
+  <link rel="stylesheet" href="/static/style/risdeveau.css">
+  <link rel="icon" type="image/webp" href="/static/icon/us/risdeveau.webp" />
+
+  <script src="/static/script/rtime.js"></script>
+  <script
+    src="https://track.lair.moe/api/script.js"
+    data-site-id="1"
+    defer
+  ></script>
+  <script
+    src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"
+    integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz"
+    crossorigin="anonymous"
+  ></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta
+    name="htmx-config"
+    content='{
+      "responseHandling":[
+        {"code":"204", "swap": false},
+        {"code":"304", "swap": false},
+        {"code":"[23]..", "swap": true},
+        {"code":"422", "swap": true},
+        {"code":"[45]..", "swap": false, "error":true},
+        {"code":"...", "swap": true}
+      ]
+    }'
+  />
+</head>
+<body>
+  <header>
+    <a href="{{ url_for('root.index') }}">Lair</a>
+  </header>
+
+  <main>
+    {% for m in (
+      'info',
+      'contacts',
+      'listenbrainz',
+      'steam',
+      'donate',
+      '88x31'
+    ) %}
+      {% include 'risdeveau/templates/%s.htm' % m %}
+    {% endfor %}
+  </main>
+</body>
+</html>

blueprints/risdeveau/templates/index.pug

@@ -1,50 +0,0 @@
-doctype html
-
-html(lang="en")
-  head
-    title Sweet Bread
-
-    each f in ('tw', 'main', 'risdeveau')
-      link(rel="stylesheet", href="/static/style/#{f}.css")
-
-    link(rel="icon" type="image/webp" href="/static/icon/us/risdeveau.webp")
-
-    script(src="/static/script/rtime.js")
-    script(
-      src="https://track.lair.moe/api/script.js"
-      data-site-id="1"
-      defer
-    )
-    script(
-      src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"
-      integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz"
-      crossorigin="anonymous"
-    )
-    script(defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js")
-
-    meta(name="viewport" content="width=device-width, initial-scale=1.0")
-    meta(
-      name="htmx-config"
-      content='{
-        "responseHandling":[
-          {"code":"204", "swap": false},
-          {"code":"304", "swap": false},
-          {"code":"[23]..", "swap": true},
-          {"code":"422", "swap": true},
-          {"code":"[45]..", "swap": false, "error":true},
-          {"code":"...", "swap": true}
-        ]
-      }'
-    )
-
-  body
-    header
-      a(href=url_for('root.index')) Lair
-
-    main
-      include risdeveau/templates/info.pug
-      include risdeveau/templates/contacts.pug
-      include risdeveau/templates/listenbrainz.pug
-      include risdeveau/templates/steam.pug
-      include risdeveau/templates/donate.pug
-      include risdeveau/templates/88x31.pug

blueprints/risdeveau/templates/info.htm

@@ -0,0 +1,50 @@
+<div class="block">
+  <table>
+    <tr>
+      <th>DoB</th>
+      <td>2005-01-13</td>
+    </tr>
+    <tr>
+      <th>Languages</th>
+      <td>
+        <table>
+          <tr>
+            <td>Russian</td>
+            <td>Native</td>
+          </tr>
+          <tr>
+            <td>English</td>
+            <td>B2</td>
+          </tr>
+          <tr>
+            <td>French</td>
+            <td>A1?</td>
+          </tr>
+          <tr>
+            <td>German</td>
+            <td>A2?</td>
+          </tr>
+          <tr>
+            <td>Japanese</td>
+            <td>Beginner</td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+    <tr>
+      <th>Student</th>
+      <td>
+        <table>
+          <tr>
+            <td>Programmer</td>
+            <td>2/4yr.</td>
+          </tr>
+          <tr>
+            <td>Translator</td>
+            <td>2/3yr.</td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</div>

blueprints/risdeveau/templates/info.pug

@@ -1,35 +0,0 @@
-.block
-  table
-    tr
-      th DoB
-      td 2005-01-13
-    tr
-      th Languages
-      td
-        table
-          tr
-            td Russian
-            td Native
-          tr
-            td English
-            td B2
-          tr
-            td French
-            td A1?
-          tr
-            td German
-            td A2?
-          tr
-            td Japanese
-            td Beginner
-
-    tr
-      th Student
-      td
-        table
-          tr
-            td Programmer
-            td 2.5/4yr.
-          tr
-            td Translator
-            td 2.5/3yr.

blueprints/risdeveau/templates/listenbrainz.htm

@@ -0,0 +1,39 @@
+{% macro track_block(track, is_active=false) %}
+  <div class="block track{% if is_active %} active{% endif %}">
+    {% if track.cover_url %}
+      <img src="{{ track.cover_url }}"/>
+    {% endif %}
+    <div>
+      <p><b>{{ track.artist_name }}</b></p>
+      <p>{{ track.track_name }}</p>
+      {% if not is_active %}
+        <p
+          x-data="rtime({{ track.listened_at }})"
+          x-text="`Listened ${timeString}`"
+          :class="textColorClass"
+        ></p>
+      {% endif %}
+    </div>
+  </div>
+{% endmacro %}
+
+<div
+  class="block"
+  hx-get="/m/listenbrainz"
+  hx-trigger="every 15s"
+  hx-swap="outerHTML"
+  hx-headers='{
+    "If-Modified-Since": {{ lb.last_updated | int }},
+    "If-None-Match": "{{ lb.etag }}"
+  }'
+>
+  <h2><a href="https://listenbrainz.org/user/risdeveau/">Listenbrainz</a></h2>
+  {% if lb.caches.now.data and lb.caches.now.data.listens.0 %}
+    {{ track_block(lb.caches.now.data.listens.0, is_active=true) }}
+  {% endif %}
+  {% if lb.caches.listens.data and lb.caches.listens.data.listens %}
+    {% for track in lb.caches.listens.data.listens %}
+      {{ track_block(track) }}
+    {% endfor %}
+  {% endif %}
+</div>

blueprints/risdeveau/templates/listenbrainz.pug

@@ -1,32 +0,0 @@
-mixin track_block(track, is_active=false)
-  - set act_cls = "active" if is_active else ""
-  .block.track(class=act_cls)
-    if track.cover_url
-      img(src=track.cover_url)
-    div
-      p
-        b= track.artist_name
-      p= track.track_name
-
-      if not is_active
-        p(
-          x-data="rtime(#{track.listened_at})",
-          x-text="`Listened ${timeString}`",
-          :class="textColorClass"
-        )
-
-.block(
-  hx-get="/m/listenbrainz",
-  hx-trigger="every 15s",
-  hx-swap="outerHTML",
-  hx-headers='{"If-None-Match": "#{lb.etag}"}'
-)
-  h2
-    a(href="https://listenbrainz.org/user/risdeveau/") Listenbrainz
-
-  if lb.caches.now.data and lb.caches.now.data.listens[0]
-    +track_block(lb.caches.now.data.listens[0], true)
-
-  if lb.caches.listens.data and lb.caches.listens.data.listens
-    each track in lb.caches.listens.data.listens
-      +track_block(track)

blueprints/risdeveau/templates/steam.htm

@@ -0,0 +1,125 @@
+{% if request.headers.get('hx-request') != "true" %}
+  <div x-data='{ "current": null, "total_mode": "T" }' class="mt-1">
+{% endif %}
+
+<div
+  class="block steam"
+  hx-get="/m/steam"
+  hx-trigger="every 1m"
+  hx-swap="outerHTML"
+  hx-headers='{
+    "If-Modified-Since": {{ steam.last_updated | int }},
+    "If-None-Match": "{{ steam.etag }}"
+  }'
+>
+  <h2><a href="https://steamcommunity.com/id/risdeveau">Steam</a></h2>
+
+  {{ steam.caches.recent.status }}
+  {{ steam.caches.owned.status }}
+  {% if steam.caches.recent.data.games %}
+    <h3>Recently played:</h3>
+    {% for g in steam.caches.recent.data.games.values() %}
+      <div href="https://store.steampowered.com/app/{{ g.appid }}" class="block">
+        <picture>
+          <source media="(max-width: 45rem)" srcset="{{ g.v_cover }}">
+          <img src="{{ g.h_cover }}">
+        </picture>
+
+        <div>
+          <strong>{{ g.name }}</strong>
+          <p>Played last 2 weeks: {{ tmsmp(g.playtime_2weeks*60) }}
+
+          <div>
+            <p
+              x-data='{ playtime: { L: "{{ tmsmp(g.playtime_linux_forever*60) }}", W: "{{ tmsmp(g.playtime_windows_forever*60) }}", T: "{{ tmsmp(g.playtime_forever*60) }}" }}'
+              x-text="`Total played: ${playtime[total_mode]}`"
+            >
+            </p>
+
+            <div>
+              <button @click="total_mode = 'L'" :class="total_mode == 'L' && 't-green'">L</button>
+              <button @click="total_mode = 'W'" :class="total_mode == 'W' && 't-green'">W</button>
+              <button @click="total_mode = 'T'" :class="total_mode == 'T' && 't-green'">T</button>
+            </div>
+
+          </div>
+
+          {% if steam.caches.owned.data.games %}
+            {% if steam.caches.owned.data.games[g.appid] %}
+              <p
+                x-data="steam_rtime({{ steam.caches.owned.data.games[g.appid].rtime_last_played }})"
+                x-text="`Last played: ${timeString}`"
+                :class="textColorClass"
+              ></p>
+            {% else %}
+              <p class="t-red">Last played: Unknown</p>
+            {% endif %}
+          {% endif %}
+        </div>
+      </div>
+    {% endfor %}
+    <p
+      x-data="rtime({{steam.caches.recent.last_updated}})"
+      x-text="`Last updated: ${timeString}`"
+    ></p>
+  {% endif %}
+
+  {% if steam.caches.owned.data.games %}
+    <h3>Top played games:</h3>
+    {% set owned_games = steam.caches.owned.data.games.values() | sort(attribute="playtime_forever", reverse=true) %}
+    {% for g in owned_games[:5] %}
+      <div
+        @click='current == {{ g.appid }} ? current = null : current = {{ g.appid }}'
+        href="https://store.steampowered.com/app/{{ g.appid }}"
+        class="block"
+      >
+        <picture>
+          <source media="(max-width: 45rem)" srcset="{{ g.v_cover }}">
+          <img src="{{ g.h_cover }}">
+        </picture>
+
+        <div>
+          <strong>{{ g.name }}</strong>
+          <p>
+            Total played:
+            {{ tmsmp(g.playtime_linux_forever*60) }} (<abbr title="On Linux">L</abbr>) +
+            {{ tmsmp(g.playtime_windows_forever*60) }} (<abbr title="On Windows">W</abbr>) =
+            {{ tmsmp(g.playtime_forever*60) }} (<abbr title="Total">T</abbr>)
+          </p>
+          {% if g.rtime_last_played != 0 %}
+            <p
+              x-data="steam_rtime({{ g.rtime_last_played }})"
+              x-text="`Last played: ${timeString}`"
+              :class="textColorClass"
+            ></p>
+          {% endif %}
+        </div>
+      </div>
+      <div
+        class="block popup"
+        x-show="current == {{ g.appid }}"
+        x-transition:enter-start="off"
+        x-transition:leave-end="off"
+      >
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+      </div>
+    {% endfor %}
+    <p
+      x-data="rtime({{steam.caches.owned.last_updated}})"
+      x-text="`Last updated: ${timeString}`"
+    ></p>
+  {% endif %}
+
+</div>
+
+{% if request.headers.get('hx-request') != "true" %}
+  </div>
+{% endif %}

blueprints/risdeveau/templates/steam.pug

@@ -1,52 +0,0 @@
-mixin game_block(g, show_last_played=false)
-  a.block(href="https://store.steampowered.com/app/#{g.appid}", target="_blank")
-    picture
-      source(media="(max-width: 45rem)", srcset=g.v_cover)
-      img(src=g.h_cover)
-    div
-      strong= g.name
-      if g.playtime_2weeks
-        p Played last 2 weeks: #{tmsmp(g.playtime_2weeks * 60)}
-      p
-        - var lin = g.playtime_linux_forever > 0;
-        - var win = g.playtime_windows_forever > 0;
-        | Total played:
-        if lin
-          = tmsmp(g.playtime_linux_forever * 60)
-          |  (
-          abbr(title="On Linux") L
-          | )
-        if lin and win
-          = " + "
-        if win
-          = tmsmp(g.playtime_windows_forever * 60)
-          |  (
-          abbr(title="On Windows") W
-          | )
-        if lin and win
-          = " = "
-          = tmsmp(g.playtime_forever * 60)
-      if show_last_played and g.rtime_last_played != 0
-        p Last played: #{utmsmp(g.rtime_last_played)}
-
-.block.steam(
-  hx-get="/m/steam",
-  hx-trigger="every 1m",
-  hx-swap="outerHTML",
-  hx-headers='{ "If-None-Match": "#{steam.etag}" }'
-)
-  h2
-    a(href="https://steamcommunity.com/id/risdeveau") Steam
-
-  if steam.caches.recent.data.games
-    h3 Recently played:
-    each g in steam.caches.recent.data.games
-      +game_block(g)
-    p(x-data="rtime(#{steam.caches.recent.last_updated})", x-text="`Last updated: ${timeString}`")
-
-  if steam.caches.owned.data.games
-    h3 Top played games:
-    - var owned_games = steam.caches.owned.data.games | sort(attribute="playtime_forever", reverse=true)
-    each g in owned_games[:5]
-      +game_block(g, true)
-    p(x-data="rtime(#{steam.caches.owned.last_updated})", x-text="`Last updated: ${timeString}`")

blueprints/root/__init__.py

@@ -17,12 +17,12 @@ def render_tmpl(filename: str) -> str:
 
 @bp.route("/")
 def index():
-    return render_tmpl('index.pug')
+    return render_tmpl('index.html')
 
 @bp.route("/host")
 def host():
-    return render_tmpl('host.pug')
+    return render_tmpl('host.html')
 
 @bp.route("/us")
 def us():
-    return render_tmpl('us.pug')
+    return render_tmpl('us.html')

blueprints/root/static/style/tw.scss

@@ -1,5 +1,11 @@
 @use "catppuccin" as theme;
 
+.m {
+  &t {
+    &-1 { margin-top: .5rem; }
+  }
+}
+
 .t {
   &-red { color: theme.$red; }
   &-orange { color: theme.$peach; }

blueprints/root/templates/base.pug

@@ -1,33 +0,0 @@
-doctype html
-html(lang=g.locale)
-  head
-    title Lair
-
-    link(rel="stylesheet" href="/static/style/main.css")
-    link(rel="icon" type="image/webp" href="/static/icon/lair.webp")
-
-    script(src="/static/script/copy-mono.js")
-    script(
-      src="https://track.lair.moe/api/script.js"
-      data-site-id="1"
-      defer
-    )
-    meta(name="viewport" content="width=device-width, initial-scale=1.0")
-    meta(name="mock-email" content="admin@example.com")
-
-    meta(property="og:type" value="website")
-    meta(property="og:url" value="https://lair.moe")
-    meta(property="og:title" value="Lair.moe")
-    meta(property="og:image" value="https://lair.moe/static/icon/lair.webp")
-    meta(property="og:description" value=_("description"))
-
-  body
-    include root/templates/header.pug
-
-    h1
-      block title
-
-    main
-      block content
-
-    include root/templates/footer.pug

blueprints/root/templates/base.tmpl

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Lair</title>
+
+  <link rel="stylesheet" href="/static/style/main.css">
+  <link rel="icon" type="image/webp" href="/static/icon/lair.webp" />
+  <script src="/static/script/copy-mono.js"> </script>
+  <script
+    src="https://track.lair.moe/api/script.js"
+    data-site-id="1"
+    defer
+  ></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="mock-email" content="admin@example.com">
+
+  <!-- og meta -->
+  <meta property="og:type" value="website" />
+  <meta property="og:url" value="https://lair.moe" />
+  <meta property="og:title" value="Lair.moe" />
+  <meta property="og:image" value="https://lair.moe/static/icon/lair.webp" />
+  <meta property="og:description" value="{{ _("description") }}" />
+</head>
+<body>
+  {% include 'header.tmpl' %}
+
+  <h1>{% block title %}{% endblock %}</h1>
+
+  <main>
+    {% block content %}{% endblock %}
+  </main>
+
+  {% include 'footer.tmpl' %}
+</body>
+</html>

blueprints/root/templates/footer.pug

@@ -1,9 +0,0 @@
-footer
-  div
-    | lair.moe &#127279; 2025 - 2026</div>
-  div
-    a(href="https://g.lair.moe/Sweetbread/lair.moe")= _('site source')
-  div
-    = _('contact us')
-    = ": "
-    a(href="mailto:admin@lair.moe") admin@lair.moe

blueprints/root/templates/footer.tmpl

@@ -0,0 +1,5 @@
+<footer>
+	<div>lair.moe &#127279; 2025 - 2026</div>
+	<div><a href="https://g.lair.moe/Sweetbread/lair.moe">{{ _('site source') }}</a></div>
+	<div>{{ _('contact us') }}: <a href="mailto:admin@lair.moe">admin@lair.moe</a></div>
+</footer>

blueprints/root/templates/header.pug

@@ -1,17 +0,0 @@
-header
-  if request.path != url_for('.index')
-    a(href=url_for('.index')) Lair
-  else
-    div
-
-  .header-links
-    -
-      var links = (
-        ('.us', _('about us')),
-        ('.host', _('about host')),
-      )
-    each l, t in links
-      if url_for(l) == request.path
-        strong= t
-      else
-        a(href=url_for(l))= t

blueprints/root/templates/header.tmpl

@@ -0,0 +1,20 @@
+<header>
+	{%- if request.path != url_for('.index') %}
+		<a href="{{ url_for('.index') }}">Lair</a>
+	{%- else %}
+		<div></div>
+	{%- endif %}
+
+	<div class="header-links">
+		{%- for (l, t) in (
+			('.us', _('about us')),
+			('.host', _('about host'))
+		)  %}
+			{%- if url_for(l) == request.path %}
+				<strong>{{ t }}</strong>
+			{%- else %}
+				<a href="{{ url_for(l) }}">{{ t }}</a>
+			{%- endif %}
+		{%- endfor %}
+	</div>
+</header>

blueprints/root/templates/host.html

@@ -0,0 +1,21 @@
+{% extends 'base.tmpl' %}
+
+{% block title %}{{ _('about host') }}{% endblock %}
+
+{% block content %}
+  <a href="https://play2go.cloud/?ref_id=4baFoOIp5QE" target="_blank" class="block">
+    <strong>{{ _("host:hoster") }}</strong>: play2go
+    <p>{{ _('host:hoster_descr') }}</p>
+  </a>
+
+  <div class="block">
+    <strong>{{ _("host:specifications") }}</strong>:
+    <ul>
+      <li>CPU: Ryzen 9@3.4GHz (4 cores)</li>
+      <li>RAM: 8 GB</li>
+      <li>SSD: 150 GB</li>
+      <li>ETH: 500Mb/s</li>
+      <li>Loc: Deutschland, Frankfurt am Main</li>
+    </ul>
+  </div>
+{% endblock %}

blueprints/root/templates/host.pug

@@ -1,20 +0,0 @@
-extends root/templates/base.pug
-
-block title
-  = _('about host')
-
-block content
-  a.block(href="https://play2go.cloud/?ref_id=4baFoOIp5QE" target="_blank")
-    strong= _("host:hoster")
-    | : play2go
-    p=  _('host:hoster_descr')
-
-  .block
-    strong= _("host:specifications")
-    | :
-    ul
-      li CPU: Ryzen 9@3.4GHz (4 cores)
-      li RAM: 8 GB
-      li SSD: 150 GB
-      li ETH: 500Mb/s
-      li Loc: Deutschland, Frankfurt am Main

blueprints/root/templates/index.html

@@ -0,0 +1,52 @@
+{% extends 'base.tmpl' %}
+
+{% block title %}
+	<img src="/static/icon/lair.webp" class="icon" />
+	Lair
+{% endblock %}
+
+{% block content %}
+	<a href="https://b.lair.moe" target="_blank" class="block">
+		<div class="header">
+			<img src="/static/icon/service/sharkey.webp" class="icon"/>
+			<strong>Sharkey</strong>
+		</div>
+		<p>{{ _('index.descr:sharkey') }}</p>
+	</a>
+	<a href="https://g.lair.moe" target="_blank" class="block">
+		<div class="header">
+			<img src="/static/icon/service/gitea.webp" class="icon"/>
+			<strong>Gitea</strong>
+		</div>
+		<p>{{ _('index.descr:gitea') }}</p>
+	</a>
+
+	<div class="block">
+		<p><a href="https://m.codrs.ru" target="_blank"><strong>Matrix</strong></a> &mdash; {{ _('index.descr:matrix') }}</p>
+		<p><a href="https://c.lair.moe" target="_blank"><strong>Copyparty</strong></a> &mdash; {{ _('index.descr:copyparty') }}</p>
+		<p><a href="https://tools.lair.moe" target="_blank"><strong>IT-tools</strong></a> &mdash; {{ _('index.descr:tools') }}</p>
+		<p><a href="https://vert.lair.moe" target="_blank"><strong>Vert</strong></a> &mdash; {{ _('index.descr:vert') }}</p>
+	</div>
+
+	<div class="block">
+		<strong>{{ _('index:altfronts') }}</strong>
+		<p><a href="https://s.lair.moe" target="_blank"><strong>4get</strong></a> &mdash; {{ _('index.descr:4get') }}</p>
+		<p><a href="https://tl.lair.moe" target="_blank"><strong>TransLite</strong></a> &mdash; {{ _('index.descr:tl') }}</p>
+		<p><a href="https://lyr.lair.moe" target="_blank"><strong>Intellectual</strong></a> &mdash; {{ _('index.descr:lyr') }}</p>
+	</div>
+
+	<div class="block">
+		<div>
+			<strong>DNS</strong>:
+			<ul>
+				<li><span class="mono">64.188.64.176</span></li>
+				<li>DoT: <span class="mono">lair.moe:853</span></li>
+				<li>DoH: <span class="mono">dns.lair.moe</span></li>
+			</ul>
+		</div>
+		<p>
+			<strong>Yggdrasil</strong>:
+			<span class="mono">200:ee1:bad2:1732:4b91:c3e3:2f08:29b3</span>
+		</p>
+	</div>
+{% endblock %}

blueprints/root/templates/index.pug

@@ -1,70 +0,0 @@
-extends root/templates/base.pug
-
-block title
-  img.icon(src="/static/icon/lair.webp")
-  |  Lair
-
-block content
-  a.block(href="https://b.lair.moe" target="_blank")
-    .header
-      img.icon(src="/static/icon/service/sharkey.webp")
-      strong Sharkey
-    p= _('index.descr:sharkey')
-
-  a.block(href="https://g.lair.moe" target="_blank")
-    .header
-      img.icon(src="/static/icon/service/gitea.webp")
-      strong Gitea
-    p= _('index.descr:gitea')
-
-  .block
-    p
-      a(href="https://m.lair.moe" target="_blank")
-        strong Matrix
-      |  — {{ _('index.descr:matrix') }}
-    p
-      a(href="//c.lair.moe" target="_blank")
-        strong Copyparty
-      |  — {{ _('index.descr:copyparty') }}
-    p
-      a(href="https://tools.lair.moe" target="_blank")
-        strong IT-tools
-      |  — {{ _('index.descr:tools') }}
-    p
-      a(href="https://vert.lair.moe" target="_blank")
-        strong Vert
-      |  — {{ _('index.descr:vert') }}
-
-  .block
-    strong= _('index:altfronts')
-    p
-      a(href="https://s.lair.moe" target="_blank")
-        strong 4get
-      |  — {{ _('index.descr:4get') }}
-    p
-      a(href="https://tl.lair.moe" target="_blank")
-        strong TransLite
-      |  — {{ _('index.descr:tl') }}
-    p
-      a(href="https://lyr.lair.moe" target="_blank")
-        strong Intellectual
-      |  — {{ _('index.descr:lyr') }}
-
-  .block
-    div
-      strong DNS
-      | :
-      ul
-        li
-          span.mono 64.188.64.176
-        li
-          | DoT: 
-          span.mono lair.moe:853
-        li
-          | DoH: 
-          span.mono dns.lair.moe
-
-    p
-      strong Yggdrasil
-      | : 
-      span.mono 200:ee1:bad2:1732:4b91:c3e3:2f08:29b3

blueprints/root/templates/us.html

@@ -0,0 +1,21 @@
+{% extends 'base.tmpl' %}
+
+{% block title %}О нас{% endblock %}
+
+{% block content %}
+  <a href="{{ url_for('risdeveau.index') }}" class="block green">
+    <div class="header">
+      <img src="/static/icon/us/risdeveau.webp" class="icon"/>
+      Sweetbread
+    </div>
+    Главный админ, занимается почти всеми сервисами. Создал этот сайт
+  </a>
+
+  <div class="block orange disabled">
+    <div class="header">
+      <img src="/static/icon/us/chest.webp" class="icon"/>
+      Chest
+    </div>
+    Должна была помогать делать этот сайт
+  </div>
+{% endblock %}

blueprints/root/templates/us.pug

@@ -1,17 +0,0 @@
-extends root/templates/base.pug
-
-block title
-  | О нас
-
-block content
-  a.block.green(href=url_for('risdeveau.index'))
-    .header
-      img.icon(src="/static/icon/us/risdeveau.webp")
-      | Sweetbread
-    | Главный админ, занимается почти всеми сервисами. Создал этот сайт
-
-  .block.orange.disabled
-    .header
-      img.icon(src="/static/icon/us/chest.webp")
-      | Chest
-    | Должна была помогать делать этот сайт

requirements.txt

@@ -5,4 +5,3 @@ requests
 APScheduler
 musicbrainzngs
 python-magic
-git+https://github.com/VerySweetBread/pypugjs

shell.nix

@@ -9,7 +9,7 @@ pkgs.mkShell {
     python
     python-magic
     virtualenv
-    pkgs.dart-sass
+    pkgs.nodePackages.sass
   ];
 
   shellHook = ''