n/250kb-club
1
0
Fork 0
mirror of https://github.com/nkoehring/250kb-club.git synced 2025-04-19 13:49:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: page template markup

Browse source
This commit is contained in:
Norman Köhring 2024-12-15 13:47:44 +01:00
parent 9039f0e70f
commit cb31f35d06
1 changed files with 94 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

168
templates/page.html
View file

@ -1,52 +1,66 @@
{% extends "base.html" %}
{% block content %}
{% extends "base.html" %} {% block content %}
<main id="member">
<h1 id="title" class="p-name dated">
{{ page.title }}
</h1>
<p class="big center">
Proud member of the exclusive 250KB&nbsp;Club!
</p>
<p>
<time class="dt-published" datetime="{{ page.date }}" pubdate="" itemprop="datePublished" content="{{ page.date }}">
Added: {{ page.date }}
</time>
|
<time class="dt-published" datetime="{{ page.date }}" pubdate="" itemprop="datePublished" content="{{ page.date }}">
Last updated: {{ page.date }}
</time>
</p>
<p class="e-content">
<a rel="noopener nofollow" href="{{ page.extra.source }}" target="_blank">{{ page.title }}</a>
is a member of the exclusive 250KB Club. The page weighs
<strong>
{% if page.extra.size == 0 %}
under 1kb
{% else %}
only {{ page.extra.size }}kb
{% endif %}
</strong> and has a content-to-bloat ratio of
<strong>{{ page.extra.ratio }}%</strong>.
</p>
<p>
They are now entitled to add one of those shiny badges to your page. But don't forget, even though I tried to make them as small as possible, a badge will add some kilobytes to your page weight.
A code snipped can be found by clicking on the respective badge.
</p>
<p class="badges">
The badges can either be downloaded and served by yourself or linked directly from 250KB.club.
The latter might save a few users some bandwidth if the badge is already cached.
On the other hand this gives the 250KB.club server a log entry for <i>every visitor of <strong>your</strong> page</i>.
I'm not interested in those logs but you still have to trust my word. So decide for yourself.
</p>
<h1 id="title" class="p-name dated">{{ page.title }}</h1>
<p class="big center">Proud member of the exclusive 250KB&nbsp;Club!</p>
<p>
<time
class="dt-published"
datetime="{{ page.date }}"
pubdate=""
itemprop="datePublished"
content="{{ page.date }}"
>
Added: {{ page.date }}
</time>
|
<time
class="dt-published"
datetime="{{ page.date }}"
pubdate=""
itemprop="datePublished"
content="{{ page.date }}"
>
Last updated: {{ page.date }}
</time>
</p>
<p class="e-content">
<a
rel="noopener nofollow"
href="{{ page.extra.source }}"
target="_blank"
>{{ page.title }}</a
>
is a member of the exclusive 250KB Club. The page weighs
<strong>
{% if page.extra.size == 0 %} under 1kb {% else %} only {{
page.extra.size }}kb {% endif %}
</strong>
and has a content-to-bloat ratio of
<strong>{{ page.extra.ratio }}%</strong>.
</p>
<p>
The owner of this page is now entitled to add one of those shiny badges
to their page. But, even though I tried to make them as small as
possible, a badge will add some kilobytes to the page weight. A code
snipped can be found by clicking on the respective badge.
</p>
<p class="badges">
The badges can either be downloaded and served as part of the website or
linked directly from 250KB.club. The latter might save a few users some
bandwidth if the badge is already cached. On the other hand this gives
the 250KB.club server a log entry for
<i>every visitor of <strong>your</strong> page</i>. I'm not interested
in those logs but you still have to trust my word. So decide for
yourself.
</p>
<p>
<details>
<summary>
<img alt="simple badge, dark" src="/simple_badge_dark.png" />
(1.4kB)
</summary>
<pre><code>
<p>
<details>
<summary>
<img alt="simple badge, dark" src="/simple_badge_dark.png" />
(1.4kB)
</summary>
<pre><code>
&lt;a title="250KB Club page" href="https://250kb.club/{{ page.slug }}"&gt;
&lt;img
alt="badge: proud member of the 250KB Club"
@ -54,14 +68,18 @@
/&gt;
&lt;/a&gt;
</code></pre>
</details>
</p><p>
<details>
<summary>
<img alt="simple badge, bright" src="/simple_badge_bright.png" />
(1.7kB)
</summary>
<pre><code>
</details>
</p>
<p>
<details>
<summary>
<img
alt="simple badge, bright"
src="/simple_badge_bright.png"
/>
(1.7kB)
</summary>
<pre><code>
&lt;a title="250KB Club page" href="https://250kb.club/{{ page.slug }}"&gt;
&lt;img
alt="badge: proud member of the 250KB Club"
@ -69,14 +87,15 @@
/&gt;
&lt;/a&gt;
</code></pre>
</details>
</p><p>
<details>
<summary>
<img alt="color badge, bright" src="/color_badge_bright.png" />
(4.0kB)
</summary>
<pre><code>
</details>
</p>
<p>
<details>
<summary>
<img alt="color badge, bright" src="/color_badge_bright.png" />
(4.0kB)
</summary>
<pre><code>
&lt;a title="250KB Club page" href="https://250kb.club/{{ page.slug }}"&gt;
&lt;img
alt="badge: proud member of the 250KB Club"
@ -84,14 +103,15 @@
/&gt;
&lt;/a&gt;
</code></pre>
</details>
</p><p>
<details>
<summary>
<img alt="color badge, dark" src="/color_badge_dark.png" />
(5.7kB)
</summary>
<pre><code>
</details>
</p>
<p>
<details>
<summary>
<img alt="color badge, dark" src="/color_badge_dark.png" />
(5.7kB)
</summary>
<pre><code>
&lt;a title="250KB Club page" href="https://250kb.club/{{ page.slug }}"&gt;
&lt;img
alt="badge: proud member of the 250KB Club"
@ -99,9 +119,9 @@
/&gt;
&lt;/a&gt;
</code></pre>
</details>
</p>
</details>
</p>
<p><a href="/">back</a></p>
<p><a href="/">back</a></p>
</main>
{% endblock content %}