feat: New homepage!

Signed-off-by: prettysunflower <me@prettysunflower.moe>
2025-10-04 22:45:21 -04:00
parent 6c9d51a13a
commit 62fcc3e338
14 changed files with 585 additions and 272 deletions
@@ -1,4 +1,3 @@
-kakigoori/local_settings.py
 .DS_Store
 deploy.sh

@@ -0,0 +1,4 @@
+root = true
+
+[{*.html,*.scss}]
+indent_size = 4
@@ -1,4 +1,3 @@
-local_settings.py
 .DS_Store
 deploy.sh

@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="Black">
-    <option name="enabledOnReformat" value="true" />
-    <option name="enabledOnSave" value="true" />
    <option name="sdkName" value="Python 3.13 virtualenv at ~/kakigoori/.venv" />
  </component>
  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.13 virtualenv at ~/kakigoori/.venv" project-jdk-type="Python SDK" />
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+    <option name="myRunOnSave" value="true" />
+    <option name="myFilesPattern" value="**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,html,scss}" />
+  </component>
+</project>
@@ -1,6 +1,6 @@
 FROM alpine:3.22

-RUN apk add curl python3 exiftool
+RUN apk add curl python3 exiftool git
 RUN adduser -D kakigoori

 USER kakigoori
@@ -10,9 +10,19 @@ ENV PATH="/home/kakigoori/.local/bin/:$PATH"

 WORKDIR /kakigoori

-COPY . .
+COPY --chown=1000:1000 . .

 RUN uv sync --group prod

+RUN git config --global --add safe.directory /kakigoori
+RUN echo VERSION=\"$(git describe --tag)\" > kakigoori/version.py
+
+USER root
+
+RUN apk del git
+RUN rm -rf .git
+
+USER prettysunflower
+
 ENTRYPOINT ["/home/kakigoori/.local/bin/uv", "run", "gunicorn"]
 CMD ["-w", "4", "kakigoori.wsgi", "-b", "0.0.0.0:8001"]
@@ -1,4 +1,5 @@
 import hashlib
+import os
 import random
 import string
 from io import BytesIO
@@ -21,12 +22,16 @@ from images.decorators import (
 )
 from images.models import Image, ImageVariant
 from images.utils import get_b2_resource, remove_exif_gps_data
+from kakigoori import version

 JpegImagePlugin._getmp = lambda x: None


 def index(request):
-    return render(request, "index.html")
+    return render(request, "index.html", {
+        "DEBUG": settings.DEBUG,
+        "GIT_COMMIT": version.VERSION,
+    })


@csrf_exempt
@@ -108,6 +108,7 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/4.2/howto/static-files/

 STATIC_URL = "static/"
+STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

 # Default primary key field type
 # https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field
@@ -14,9 +14,16 @@ Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
+
+from django.conf import settings
+
 # from django.contrib import admin
 from django.urls import path, include
+from django.contrib.staticfiles.urls import staticfiles_urlpatterns

 urlpatterns = [
    path("", include("images.urls")),
 ]
+
+if settings.DEBUG:
+    urlpatterns += staticfiles_urlpatterns()
@@ -0,0 +1 @@
+VERSION = "dev"
@@ -1,10 +1,12 @@
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
 body {
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  background-color: #fdf6e3;
+  font-family: "JetBrains Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  background-color: oklch(97.35% 0.0261 90.1deg);
  margin: 0;
 }
+body ::selection {
+  background-color: oklch(93.06% 0.026 92.4deg);
+}

 .container {
  width: 95%;
@@ -37,51 +39,160 @@ body {
 }

 header {
-  display: flex;
+  display: grid;
  justify-content: center;
  align-items: center;
-  margin-top: 2rem;
  gap: 2rem;
-  padding: 3rem 1rem;
-  margin-bottom: 3rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  flex-wrap: wrap;
+  height: 80vh;
+  margin-right: 3rem;
+  grid-template-columns: 1.5fr 1fr;
+  margin-bottom: 2rem;
 }
-header div:has(img) {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+header h1 {
+  font-weight: 900;
+  margin-bottom: 0;
+  font-size: 3rem;
 }
-header img {
-  width: 80%;
-  max-width: 300px;
+header h1 + p {
+  margin-top: 0.25em;
+  margin-bottom: 0;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+header h1 + p + p {
+  margin-top: 0.5em;
+  font-style: italic;
+}
+header hr {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+header .background-image {
+  margin-right: 1rem;
+  background-image: url("https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/auto");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 100%;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  border-bottom-right-radius: 2em;
 }

-main {
-  margin-bottom: 5rem;
-}
-main #examples-grid {
+main .description {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
 }
-main #examples-grid p > strong {
-  word-break: break-all;
+main .description mark {
+  display: inline-block;
+  padding: 0.25em 0.5em;
+  margin: 0 0 0.25em;
+  color: white;
+  background-color: oklch(59.24% 0.2025 355.89deg);
 }
-@media (max-width: 768px) {
-  main #examples-grid {
-    grid-template-columns: 1fr;
-  }
+main .description mark::selection {
+  background-color: oklch(from oklch(59.24% 0.2025 355.89deg) calc(l - 0.1) c h);
 }
-main #examples-grid img {
-  max-width: 100%;
+main .description mark.green {
+  background-color: oklch(64.44% 0.1508 118.6deg);
 }
-main details {
+main .description mark.green::selection {
+  background-color: oklch(54.44% 0.1508 118.6deg);
+}
+main .description pre {
+  background-color: oklch(26.73% 0.0486 219.82deg);
+  color: white;
+  padding: 1rem;
+  font-family: "JetBrains Mono", monospace;
+  font-weight: 600;
+}
+main .description pre ::selection {
+  background-color: oklch(30.92% 0.0518 219.65deg);
+}
+main .magenta {
+  background-color: oklch(59.24% 0.2025 355.89deg);
+  color: white;
+}
+main .magenta ::selection {
+  background-color: oklch(from oklch(59.24% 0.2025 355.89deg) calc(l - 0.1) c h);
+}
+main .cyan {
+  background-color: oklch(64.37% 0.1019 187.38deg);
+  color: white;
+}
+main .cyan ::selection {
+  background-color: oklch(from oklch(64.37% 0.1019 187.38deg) calc(l - 0.1) c h);
+}
+main #examples {
+  padding: 2rem 0;
+}
+main #examples h2 {
+  margin-top: 0;
+}
+main #examples #examples-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 1rem;
+}
+main #examples #examples-grid img {
+  width: 100%;
+  aspect-ratio: 1.33;
+}
+main #examples #examples-grid figure {
+  display: flex;
+  flex-flow: column;
+  margin: 0;
+}
+main #examples #examples-grid figcaption {
+  background-color: oklch(from oklch(59.24% 0.2025 355.89deg) calc(l - 0.1) c h);
+  text-align: center;
+  padding: 0.5rem;
+}
+main #examples #examples-grid figcaption::selection, main #examples #examples-grid figcaption ::selection {
+  background-color: oklch(from oklch(59.24% 0.2025 355.89deg) calc(l - 0.2) c h);
+}
+main #qa {
+  padding: 2rem 0;
+}
+main #qa ::selection {
+  background-color: oklch(from oklch(64.37% 0.1019 187.38deg) calc(l - 0.2) c h);
+}
+main #qa h2 {
+  margin-top: 0;
+}
+main #qa details {
+  background-color: oklch(from oklch(64.37% 0.1019 187.38deg) calc(l - 0.1) c h);
+  cursor: pointer;
  margin-bottom: 1rem;
 }
-main hr {
-  border: 1px solid rgba(0, 0, 0, 0.1);
+main #qa details summary {
+  padding: 1rem;
+}
+main #qa details ::selection {
+  background-color: oklch(from oklch(64.37% 0.1019 187.38deg) calc(l - 0.2) c h);
+}
+main #qa details[open] summary {
+  padding: 0 0 1rem 0;
+}
+main #qa details[open] {
+  background-color: oklch(from oklch(64.37% 0.1019 187.38deg) calc(l - 0.2) c h);
+  padding: 1rem;
+}
+main #qa details[open]::selection, main #qa details[open] ::selection {
+  background-color: oklch(from oklch(64.37% 0.1019 187.38deg) calc(l - 0.3) c h);
+}
+main #qa details[open] a, main #qa details[open] a:visited, main #qa details[open] a:hover, main #qa details[open] a:active {
+  color: white;
+}
+
+footer {
+  background-color: oklch(from oklch(64.37% 0.1019 187.38deg) calc(l - 0.1) c h);
+  color: white;
+  padding: 1rem;
+  text-align: center;
+}
+footer p {
+  margin: 0;
 }

 /*# sourceMappingURL=index.css.map */
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE,aACE;EAEF;EACA;;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;AAGF;EARF;IASI;;;AAGF;EAZF;IAaI;;;AAGF;EAhBF;IAiBI;;;AAGF;EApBF;IAqBI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAVF;IAWI;;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAQ;AAMR;EACI,aACI;EAEJ,kBANe;EAOf;;AAEA;EACI;;;AAIR;EACI;EACA;;AAEA;EAJJ;IAKQ;;;AAGJ;EARJ;IASQ;;;AAGJ;EAZJ;IAaQ;;;AAGJ;EAhBJ;IAiBQ;;;AAGJ;EApBJ;IAqBQ;;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAKJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA,kBAlGF;;AAoGE;EACI;;AAIR;EACI;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI,kBA/HE;EAgIF;;AAEA;EACI;;AAIR;EACI,kBAvID;EAwIC;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAMhB;EACI;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAIA;EACI;;AAFR;EAKI;EACA;;AAEA;EACI;;AAGJ;EACI;;;AAOpB;EACI;EACA;EACA;EACA;;AAEA;EACI","file":"index.css"}
@@ -1,86 +1,235 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+
+$magenta: oklch(0.5924 0.2025 355.89);
+$cyan: oklch(0.6437 0.1019 187.38);
+$background-color: oklch(0.9735 0.0261 90.1);
+
 body {
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  background-color: #fdf6e3;
-  margin: 0;
+    font-family:
+        "JetBrains Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    background-color: $background-color;
+    margin: 0;
+
+    ::selection {
+        background-color: oklch(0.9306 0.026 92.4)
+    }
 }

 .container {
-  width: 95%;
-  margin: 0 auto;
+    width: 95%;
+    margin: 0 auto;

-  @media (min-width: 576px) {
-    width: 540px;
-  }
+    @media (min-width: 576px) {
+        width: 540px;
+    }

-  @media (min-width: 768px) {
-    width: 720px;
-  }
+    @media (min-width: 768px) {
+        width: 720px;
+    }

-  @media (min-width: 992px) {
-    width: 960px;
-  }
+    @media (min-width: 992px) {
+        width: 960px;
+    }

-  @media (min-width: 1200px) {
-    width: 1140px;
-  }
+    @media (min-width: 1200px) {
+        width: 1140px;
+    }

-  @media (min-width: 1400px) {
-    width: 1320px;
-  }
+    @media (min-width: 1400px) {
+        width: 1320px;
+    }
 }

 header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 2rem;
-  gap: 2rem;
-  padding: 3rem 1rem;
-  margin-bottom: 3rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  flex-wrap: wrap;
-
-  div:has(img) {
-    display: flex;
+    display: grid;
    justify-content: center;
    align-items: center;
-  }
+    gap: 2rem;
+    height: 80vh;
+    margin-right: 3rem;
+    grid-template-columns: 1.5fr 1fr;
+    margin-bottom: 2rem;

-  img {
-    width: 80%;
-    max-width: 300px;
-  }
+    h1 {
+        font-weight: 900;
+        margin-bottom: 0;
+        font-size: 3rem;
+    }
+
+    h1+p {
+        margin-top: .25em;
+        margin-bottom: 0;
+        font-size: 1.25rem;
+        font-weight: bold;
+    }
+
+    h1+p+p {
+        margin-top: .5em;
+        font-style: italic;
+    }
+
+    hr {
+        border: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    .background-image {
+        margin-right: 1rem;
+        background-image: url("https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/auto");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        height: 100%;
+        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+        //border-top-right-radius: 2em;
+        border-bottom-right-radius: 2em;
+    }
 }

 main {
-  margin-bottom: 5rem;
+    .description {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+        margin-bottom: 2rem;

-  #examples-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1rem;
-    margin-bottom: 2rem;
+        mark {
+            display: inline-block;
+            padding: .25em .5em;
+            margin: 0 0 .25em;
+            color: white;
+            background-color: $magenta;

-    p > strong {
-      word-break: break-all;
+            &::selection {
+                background-color: oklch(from $magenta calc(l - 0.1) c h);
+            }
+        }
+
+        mark.green {
+            background-color: oklch(0.6444 0.1508 118.6);
+
+            &::selection {
+                background-color: oklch(0.5444 0.1508 118.6);
+            }
+        }
+
+        pre {
+            background-color: oklch(0.2673 0.0486 219.82);
+            color: white;
+            padding: 1rem;
+            font-family: "JetBrains Mono", monospace;
+            font-weight: 600;
+
+            ::selection {
+                background-color: oklch(0.3092 0.0518 219.65)
+            }
+        }
    }

-    @media (max-width: 768px) {
-      grid-template-columns: 1fr;
+    .magenta {
+        background-color: $magenta;
+        color: white;
+
+        ::selection {
+            background-color: oklch(from $magenta calc(l - 0.1) c h);
+        }
    }

-    img {
-      max-width: 100%;
+    .cyan {
+        background-color: $cyan;
+        color: white;
+
+        ::selection {
+            background-color: oklch(from $cyan calc(l - 0.1) c h);
+        }
    }
-  }

-  details {
-    margin-bottom: 1rem;
-  }
+    #examples {
+        padding: 2rem 0;

-  hr {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-  }
+        h2 {
+            margin-top: 0
+        }
+
+        #examples-grid {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 1rem;
+
+            img {
+                width: 100%;
+                aspect-ratio: 1.33;
+            }
+
+            figure {
+                display: flex;
+                flex-flow: column;
+                margin: 0;
+            }
+
+            figcaption {
+                background-color: oklch(from $magenta calc(l - 0.1) c h);
+                text-align: center;
+                padding: .5rem;
+
+                &::selection, ::selection {
+                    background-color: oklch(from $magenta calc(l - 0.2) c h);
+                }
+            }
+        }
+    }
+
+    #qa {
+        padding: 2rem 0;
+
+        ::selection {
+            background-color: oklch(from $cyan calc(l - 0.2) c h);
+        }
+
+        h2 {
+            margin-top: 0;
+        }
+
+        details {
+            background-color: oklch(from $cyan calc(l - 0.1) c h);
+            cursor: pointer;
+            margin-bottom: 1rem;
+
+            summary {
+                padding: 1rem;
+            }
+
+            ::selection {
+                background-color: oklch(from $cyan calc(l - 0.2) c h);
+            }
+
+            &[open] {
+                summary {
+                    padding: 0 0 1rem 0;
+                }
+
+                background-color: oklch(from $cyan calc(l - 0.2) c h);
+                padding: 1rem;
+
+                &::selection, ::selection {
+                    background-color: oklch(from $cyan calc(l - 0.3) c h);
+                }
+
+                a, a:visited, a:hover, a:active {
+                    color: white;
+                }
+            }
+        }
+    }
+}
+
+footer {
+    background-color: oklch(from $cyan calc(l - 0.1) c h);
+    color: white;
+    padding: 1rem;
+    text-align: center;
+
+    p {
+        margin: 0;
+    }
 }
@@ -2,191 +2,212 @@

 <!doctype html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Kakigoori</title>
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="{% static 'css/index.css' %}"
-    />
-  </head>
-  <body>
-    <header>
-      <div>
-        <img
-          src="https://kakigoori.dev/bcf6fdd9-3855-4f4d-9b5a-0791e14e29c7/auto"
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Kakigoori</title>
+        <link
+            rel="stylesheet"
+            type="text/css"
+            href="{% static 'css/index.css' %}?version=2"
        />
-      </div>
-      <div>
-        <h1>Kakigoori</h1>
-        <p>Image distribution for the web, simplified</p>
-        <p>
-          A project by
-          <a href="https://prettysunflower.moe"
-            >the prettysunflower collective</a
-          >
-        </p>
-      </div>
-    </header>
+    </head>
+    <body>
+        <header>
+            <div class="background-image">
+            </div>
+            <div>
+                <div class="headline">
+                    <h1>Kakigoori</h1>
+                    <p>Image distribution for the web, simplified</p>
+                    <p>
+                        A project by
+                        <a href="https://prettysunflower.moe"
+                            >the prettysunflower system</a
+                        >
+                    </p>
+                </div>
+            </div>
+        </header>

-    <main>
-      <div class="container">
-        <h2>Upload an image once, use it everywhere on the web</h2>
-        <p>
-          Kakigoori is an picture distribution system to publish images on the
-          web. Upload it once, and Kakigoori will create versions of the image
-          optimized for the web (AVIF, WebP). You can also request for custom
-          sized images (JPG/PNG versions will be generated on the fly, and the
-          other versions will be created within a few minutes).
-        </p>
-        <p>
-          Kakigoori's images are stored by Tigris. No matter where you are in
-          the world, images stored by Kakigoori will display as fast as
-          possible.
-        </p>
+        <main>
+            <div class="container">
+                <div class="description">
+                    <div>
+                        <h2>Upload an image <mark class="green">once</mark>,<br>Use it <mark>everywhere</mark> on the web</h2>
+                        <p>
+                            Kakigoori is an picture distribution system to publish
+                            images on the web. Upload it once, and Kakigoori will
+                            create versions of the image optimized for the web
+                            (AVIF, WebP). You can also request for custom sized
+                            images (JPG/PNG versions will be generated on the fly,
+                            and the other versions will be created within a few
+                            minutes).
+                        </p>
+                        <p>
+                            Kakigoori's images are stored by Tigris. No matter where
+                            you are in the world, images stored by Kakigoori will
+                            display as fast as possible.
+                        </p>
+                    </div>
+                    <div>
+                        <p>Request</p>
+                        <pre><code>curl \
+    -X "POST" \
+    "https://kakigoori.dev/upload" \
+    -H "Authorization: $KAKIGOORI_API_KEY" \
+    -H 'Content-Type: multipart/form-data; charset=utf-8' \
+    -F "file=image.jpg"</code></pre>
+                        <p>Response</p>
+                        <pre><code>{
+    "created": true,
+    "id": "5e858871-ede8-4f05-972c-abcfd10fcb64"
+}</code></pre>
+                    </div>
+                </div>
+            </div>

-        <hr />
+            <div class="magenta" id="examples">
+                <div class="container">
+                    <h2>Examples</h2>

-        <h2>Examples</h2>
+                    <div id="examples-grid">
+                        <figure>
+                            <img
+                                src="https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/original"
+                            />
+                            <figcaption>
+                                /original<br>
+                                JPEG<br>
+                                <em>(6.78 MB)</em>
+                            </figcaption>
+                        </figure>
+                        <figure>
+                            <img
+                                src="https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/auto"
+                            />
+                            <figcaption>
+                                /auto<br>
+                                Detect the best format compatible with the browser
+                            </figcaption>
+                        </figure>
+                        <figure>
+                            <img
+                                src="https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/avif"
+                            />
+                            <figcaption>
+                                /avif<br>
+                                AVIF (aom, yuv444, s4, q50, cq35)<br>
+                                <em>(430.67 kB)</em>
+                            </figcaption>
+                        </figure>
+                        <figure>
+                            <img
+                                src="https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/webp"
+                            />
+                            <figcaption>
+                                /webp<br>
+                                WebP (yuv420, q75)<br>
+                                <em>(463.44 kB)</em>
+                            </figcaption>
+                        </figure>
+                        <figure>
+                            <img
+                                src="https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/height/600/auto"
+                            />
+                            <figcaption>
+                                /height/600/auto<br>
+                                (Kakigoori also allows you to specify custom sizes for images)
+                            </figcaption>
+                        </figure>
+                    </div>
+                </div>
+            </div>

-        <p>
-          We uploaded a picture on Kakigoori, and the system attributed the ID
-          5e858871-ede8-4f05-972c-abcfd10fcb64 to it!
-        </p>
+            <div class="cyan" id="qa">
+                <div class="container">
+                    <h2>Q&A</h2>

-        <div id="examples-grid">
-          <p>
-            <strong
-              >https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/auto</strong
-            ><br /><em
-              >(Will display AVIF images first if available and compatible with
-              your browser, or WebP images, or Jpeg images)</em
-            >
-          </p>
-          <img
-            src="https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/auto"
-          />
-          <p>
-            <strong
-              >https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/avif</strong
-            ><br /><em
-              >(Will request the AVIF version of the image, or will return a 404
-              error if the version is not available. You can replace avif here
-              with webp)</em
-            >
-          </p>
-          <img
-            src="https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/avif"
-          />
-          <p>
-            <strong
-              >https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/original</strong
-            ><br /><em
-              >(Will request the original image that was uploaded on
-              Kakigoori)</em
-            >
-          </p>
-          <img
-            src="https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/original"
-          />
-          <p>
-            <strong
-              >https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/height/600/auto</strong
-            ><br /><em
-              >(Will request the image with an height of 600px, and will request
-              the AVIF/WebP/Jpeg/PNG image depending on what is compatible with
-              the browser and what's available)</em
-            >
-          </p>
-          <img
-            src="https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/height/600/auto"
-            style="max-height: 300px"
-          />
-          <p>
-            <strong
-              >https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/width/600/auto</strong
-            ><br /><em>(Same thing, but with a width of 600px!)</em>
-          </p>
-          <img
-            src="https://kakigoori.dev/5e858871-ede8-4f05-972c-abcfd10fcb64/width/600/auto"
-            style="max-width: 300px"
-          />
-        </div>
+                <details>
+                    <summary>Who is using Kakigoori?</summary>
+                    Our websites all have their images stored on Kakigoori! We
+                    also use Kakigoori on some projects we worked on
+                    professionally.
+                </details>

-        <hr />
+                <details>
+                    <summary>Can I upload images to Kakigoori?</summary>

-        <h2>Q&A</h2>
+                    Well... currently, We're kind of concerned about opening
+                    upload to anyone (We wouldn't want to have Tigris sending us
+                    a nasty bill for using too much storage, or having them send
+                    us a gentle email to ask why the fuck we're hosting illicit
+                    content ^^).<br />
+                    So, our default answer is no, but if you're really
+                    interested to use Kakigoori, either self-host Kakigoori
+                    yourself, or if you want to use this hosted version and
+                    you're a friendly person, please send us an email to
+                    <a href="mailto:me@prettysunflower.moe"
+                        >me@prettysunflower.moe</a
+                    >
+                    and we will see what we can do for you!<br />
+                    Also, Koumbit people, you have an uploading key, please
+                    check the Wiki! ^^
+                </details>

-        <details>
-          <summary>Who is using Kakigoori?</summary>
-          Our websites all have their images stored on Kakigoori! We also use
-          Kakigoori on some projects we worked on professionally.
-        </details>
+                <details>
+                    <summary>How private is Kakigoori?</summary>
+                    <p>
+                        We're tired of bots and AI scrappers hitting our
+                        servers, so, requests to the service are passed through
+                        <a href="https://anubis.techaro.lol/">Anubis</a>, and if
+                        your request is challenged, a cookie will be placed to
+                        remember you passed the challenged.
+                    </p>
+                    <p>
+                        Otherwise, we're not collecting data other than what is
+                        submitted to us (images!), so... it should be pretty
+                        private ^^
+                    </p>
+                </details>

-        <details>
-          <summary>Can I upload images to Kakigoori?</summary>
-          Well... currently, We're kind of concerned about opening upload to
-          anyone (We wouldn't want to have Tigris sending us a nasty bill for
-          using too much storage, or having them send us a gentle email to ask
-          why the fuck we're hosting illicit content ^^).<br />
-          So, our default answer is no, but if you're really interested to use
-          Kakigoori, either self-host Kakigoori yourself, or if you want to use
-          this hosted version and you're a friendly person, please send us an
-          email to
-          <a href="mailto:me@prettysunflower.moe">me@prettysunflower.moe</a> and
-          we will see what we can do for you!<br />
-          Also, Koumbit people, you have an uploading key, please check the
-          Wiki! ^^
-        </details>
+                <details>
+                    <summary>Is Kakigoori open-source?</summary>
+                    Yes! Please see
+                    <a
+                        href="https://git.prettysunflower.moe/prettysunflower/kakigoori"
+                        >the git project for that!</a
+                    >
+                </details>

-        <details>
-          <summary>How private is Kakigoori?</summary>
-          <p>
-            We're tired of bots and AI scrappers hitting our servers, so,
-            requests to the service are passed through
-            <a href="https://anubis.techaro.lol/">Anubis</a>, and if your
-            request is challenged, a cookie will be placed to remember you
-            passed the challenged.
-          </p>
-          <p>
-            Otherwise, we're not collecting data other than what is submitted to
-            us (images!), so... it should be pretty private ^^
-          </p>
-        </details>
+                <details>
+                    <summary>Who is behind Kakigoori?</summary>
+                    We're the prettysunflower collective (alias, Remilia, Xeon
+                    and Takeno), your friendly nearby software developers and
+                    non-binary/plural trans women!
+                </details>

-        <details>
-          <summary>Is Kakigoori open-source?</summary>
-          Yes! Please see
-          <a href="https://git.prettysunflower.moe/prettysunflower/kakigoori"
-            >the git project for that!</a
-          >
-        </details>
+                <details>
+                    <summary>... why the name Kakigoori?</summary>
+                    Remilia was hungry when she created the project, and it was
+                    warm enough that she wanted some form of kakigoori.<br />
+                    Oh, and about the sunflowers?<br />
+                    They're pretty, we love them! (That's the only reason)
+                </details>

-        <details>
-          <summary>Who is behind Kakigoori?</summary>
-          We're the prettysunflower collective (alias, Remilia, Xeon and
-          Takeno), your friendly nearby software developers and
-          non-binary/plural trans women!
-        </details>
-
-        <details>
-          <summary>... why the name Kakigoori?</summary>
-          Remilia was hungry when she created the project, and it was warm
-          enough that she wanted some form of kakigoori.<br />
-          Oh, and about the sunflowers?<br />
-          They're pretty, we love them! (That's the only reason)
-        </details>
-
-        <details>
-          <summary>How can I contact you if I want?</summary>
-          Our email is always open (<a href="mailto:me@prettysunflower.moe"
-            >me@prettysunflower.moe</a
-          >). Do note we may be a bit slow to reply, as replying to people
-          scares us a bit ^^.
-        </details>
-      </div>
-    </main>
-  </body>
+                <details>
+                    <summary>How can I contact you if I want?</summary>
+                    Our email is always open (<a
+                        href="mailto:me@prettysunflower.moe"
+                        >me@prettysunflower.moe</a
+                    >). Do note we may be a bit slow to reply, as replying to
+                    people scares us a bit ^^.
+                </details>
+                </div>
+            </div>
+        </main>
+        <footer>
+            <p>Kakigoori {{ VERSION }}{% if GIT_COMMIT %} ({{ GIT_COMMIT }}){% endif %}{% if DEBUG %} DEBUG{% endif %} - 🏳️‍⚧️ Trans rights are human rights 🏳️‍⚧️</p>
+        </footer>
+    </body>
 </html>