Add custom homepage template

This commit is contained in:
2025-07-07 17:29:34 +09:00
parent 00b4769ed9
commit 1900be4c0e
5 changed files with 310 additions and 4 deletions

View File

@@ -37,7 +37,6 @@ SNIKKET_WEB_DOMAIN='localhost'
#
#SNIKKET_WEB_SITE_NAME
# OPTIONAL SETTINGS
# =================
@@ -48,3 +47,7 @@ SNIKKET_WEB_DOMAIN='localhost'
# not re-transferred.
#
#SNIKKET_WEB_AVATAR_CACHE_TTL=1800
# Your XMPP account name and email address, to be shown on
# the homepage.
#SNIKKET_WEB_ADMIN_CONTACT=""

View File

@@ -177,6 +177,7 @@ class AppConfig:
abuse_email = environ.var("")
security_email = environ.var("")
admin_contact = environ.var("")
_UPPER_CASE = "".join(map(chr, range(ord("A"), ord("Z")+1)))
@@ -215,6 +216,8 @@ def create_app() -> quart.Quart:
app.config["SESSION_COOKIE_SECURE"] = True
app.config["SESSION_COOKIE_SAMESITE"] = "Lax"
app.config["ADMIN_CONTACT"] = config.admin_contact
app.context_processor(proc)
app.register_error_handler(
aiohttp.ClientConnectorError,
@@ -230,11 +233,11 @@ def create_app() -> quart.Quart:
)
@app.route("/")
async def index() -> werkzeug.Response:
async def index() -> typing.Union[str, werkzeug.Response]:
if infra.client.has_session:
return redirect(url_for('user.index'))
return redirect(url_for("user.index"))
return redirect(url_for('main.login'))
return await render_template("home.html")
@app.route("/site.webmanifest")
def site_manifest() -> quart.Response:

194
snikket_web/scss/home.scss Normal file
View File

@@ -0,0 +1,194 @@
/*
* Reset
*/
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
img,
figure,
figcaption,
table,
td,
tr,
thead,
tbody,
details,
summary {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Text related colors */
--copy: #444444;
--copy-darker: #242424;
--copy-darker-2: #121212;
--copy-lighter: #6b6b6b;
--copy-lighter-2: #c4c4c4;
--hyperlink: #155bca;
/* Background related colors */
--bg: #fffaef;
/*
* Colors
*/
--primary-color: #ff94a1;
--primary-color-half-light: #ffc6c8;
--secondary-color: #97aa9b;
--secondary-color-half-light: #e5e6d9;
--secondary-color-light: #cbd2c4;
}
html,
body {
margin: 0;
padding: 0;
font-size: 18px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
font-family: Verdana, sans-serif;
text-align: left;
word-wrap: break-word;
overflow-wrap: break-word;
background-color: var(--bg);
line-height: 1.5rem;
}
article,
section,
header,
footer {
a {
--transition-property: inherit;
--color: var(--copy);
--hover-color: var(--primary-color);
--hover-thickness: 0.2rem;
--text-decoration: underline;
--text-decoration-color: var(--color);
color: var(--color);
text-decoration: none;
&[href]:not([aria-disabled="true"], [aria-current="page"]) {
text-decoration: var(--text-decoration);
text-decoration-line: var(--text-decoration);
text-decoration-color: var(--text-decoration-color);
text-decoration-thickness: 1px;
text-decoration-skip-ink: none;
transition-property:
text-decoration-thickness, text-decoration-color,
var(--transition-property);
transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-timing-function);
&:hover,
&:active,
&:focus {
text-decoration-color: var(--hover-color);
text-decoration-thickness: var(--hover-thickness);
}
}
&[rel~="external"]:not(:has(img))::after {
display: inline-block;
content: "";
width: 12px;
height: 12px;
line-height: inherit;
vertical-align: middle;
background: var(--color);
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj4KICAJPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTYgMWg1djVMOC44NiAzLjg1IDQuNyA4IDQgNy4zbDQuMTUtNC4xNnpNMiAzaDJ2MUgydjZoNlY4aDF2MmExIDEgMCAwIDEtMSAxSDJhMSAxIDAgMCAxLTEtMVY0YTEgMSAwIDAgMSAxLTEiLz4KPC9zdmc+");
margin-left: 0.2em;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
> a {
color: var(--copy);
}
}
}
main.home {
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
max-width: 450px;
> header {
> img {
width: 250px;
margin-bottom: 0.3rem;
}
> h1 {
text-align: center;
font-size: 3rem;
line-height: 3rem;
font-weight: 600;
}
}
> section {
text-align: center;
> p {
margin-bottom: 1.25rem;
text-wrap: balance;
&:last-child {
margin-bottom: 0;
}
}
}
> footer {
> nav {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 1rem;
> a {
flex: 1 1 50%;
padding: 0.5rem 0.7rem;
border-radius: 0.2rem 0.5rem;
&[href]:not([aria-disabled="true"], [aria-current="page"]) {
transition-property:
background-color, text-decoration-thickness, text-decoration-color;
&:hover {
background-color: var(--secondary-color-half-light);
}
}
&[aria-current="page"] {
font-weight: 600;
background-color: var(--primary-color);
}
}
}
}
}

View File

@@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ns1="http://sozi.baierouge.fr" xmlns:cc="http://creativecommons.org/ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:dc="http://purl.org/dc/elements/1.1/" id="svg2" xml:space="preserve" viewBox="0 0 39.287 34.67" version="1.1" inkscape:version="0.91 r13725">
<g id="g10" transform="matrix(1.25 0 0 -1.25 0 34.67)">
<g id="g12">
<path id="path14" style="fill-rule:evenodd;fill:#f9f5ea" d="m8.988 22.388 5.516 2.977 0.992-0.442c0.77-0.292 1.543-0.515 2.316-0.66 1.25-0.257 1.985-0.515 2.204-0.773l-4.743-2.535c-0.734 0.218-1.726 0.457-2.976 0.715l-3.309 0.718z" inkscape:connector-curvature="0"/>
<path id="path16" style="fill-rule:evenodd;fill:#e8e1c5" d="m9.375 22.775 3.859-0.551c0.625-0.113 1.414-0.48 2.371-1.105l-0.332-7.332-0.769 0.328-5.129 1.656v7.004z" inkscape:connector-curvature="0"/>
<path id="path18" style="fill-rule:evenodd;fill:#a79e81" d="m15.605 21.119 4.411 2.371v-6.949c-0.477-0.368-1.028-0.735-1.653-1.102-0.59-0.367-1.617-0.918-3.09-1.652l0.332 7.332z" inkscape:connector-curvature="0"/>
<path id="path20" style="fill-rule:evenodd;fill:#c1aa76" d="m12.684 17.259c0.66 0.184 1.121 0.055 1.378-0.386 0.258-0.477-0.019-0.844-0.828-1.102-0.773-0.258-1.195-0.109-1.269 0.442-0.035 0.55 0.203 0.898 0.719 1.046z" inkscape:connector-curvature="0"/>
<path id="path22" style="fill-rule:evenodd;fill:#d9d2b8" d="m15.992 23.877c0.66 0.328 1.117 0.257 1.379-0.223 0.254-0.477 0.164-0.77-0.277-0.883-0.406-0.109-0.809-0.015-1.215 0.277-0.402 0.333-0.367 0.606 0.113 0.829z" inkscape:connector-curvature="0"/>
<path id="path24" style="fill-rule:evenodd;fill:#c9bf9c" d="m17.48 21.119c0.625 0.183 0.918-0.035 0.883-0.66-0.074-0.664-0.441-1.121-1.105-1.379-0.586-0.258-0.77 0-0.551 0.769 0.184 0.735 0.441 1.16 0.773 1.27z" inkscape:connector-curvature="0"/>
<path id="path26" style="fill-rule:evenodd;fill:#c1aa76" d="m10.641 20.404c0.367 0.144 0.589 0 0.664-0.441 0.074-0.442-0.075-0.665-0.442-0.665-0.406 0-0.664 0.129-0.773 0.387-0.11 0.258 0.074 0.496 0.551 0.719z" inkscape:connector-curvature="0"/>
<path id="path28" style="fill-rule:evenodd;fill:#d9d2b8" d="m12.684 23.49c0.328 0.219 0.625 0.332 0.882 0.332 0.258-0.039 0.2-0.258-0.168-0.664-0.367-0.477-0.699-0.625-0.992-0.442-0.332 0.188-0.238 0.442 0.278 0.774z" inkscape:connector-curvature="0"/>
<path id="path30" style="fill-rule:evenodd;fill:#ccc8ab" d="m16.93 7.334-16.93 4.964 16.156 6.614 14.887-5.899-14.113-5.679z" inkscape:connector-curvature="0"/>
<path id="path32" style="fill-rule:evenodd;fill:#f5f5f5" d="m30.492 12.849-15.054 4.024-14.5-5.512-0.938 0.937l15.273 5.676 15.77-4.187c0.258-0.992 0.258-1.547 0-1.656-0.145-0.11-0.273-0.016-0.383 0.277l-0.168 0.441z" inkscape:connector-curvature="0"/>
<path id="path34" style="fill-rule:evenodd;fill:#f9f5ea" d="m17.867 20.127 6.117 1.324 0.828-0.664c0.7-0.512 1.399-0.953 2.094-1.321 1.106-0.554 1.731-0.976 1.875-1.269l-5.293-1.16c-0.625 0.406-1.488 0.902-2.59 1.492l-3.031 1.598z" inkscape:connector-curvature="0"/>
<path id="path36" style="fill-rule:evenodd;fill:#e8e1c5" d="m18.363 20.404 3.528-1.602c0.55-0.293 1.23-0.863 2.039-1.707l-2.371-6.949-0.606 0.551-4.519 2.976 1.929 6.731z" inkscape:connector-curvature="0"/>
<path id="path38" style="fill-rule:evenodd;fill:#a79e81" d="m28.781 18.197-1.871-6.727-5.351-1.324 2.371 6.949 4.851 1.102z" inkscape:connector-curvature="0"/>
<path id="path40" style="fill-rule:evenodd;fill:#c1aa76" d="m20.016 14.17c0.699 0 1.105-0.258 1.214-0.77 0.11-0.477-0.257-0.734-1.101-0.773-0.774-0.036-1.121 0.203-1.051 0.718 0.11 0.551 0.422 0.825 0.938 0.825z" inkscape:connector-curvature="0"/>
<path id="path42" style="fill-rule:evenodd;fill:#d9d2b8" d="m25.035 19.631c0.735 0.148 1.156-0.036 1.266-0.551 0.113-0.551-0.074-0.828-0.551-0.828-0.402 0.039-0.75 0.238-1.047 0.609-0.293 0.402-0.183 0.66 0.332 0.77z" inkscape:connector-curvature="0"/>
<path id="path44" style="fill-rule:evenodd;fill:#c9bf9c" d="m25.695 16.599c0.664 0 0.864-0.297 0.606-0.883-0.219-0.589-0.68-0.937-1.379-1.05-0.625-0.071-0.734 0.222-0.328 0.882 0.402 0.7 0.769 1.051 1.101 1.051z" inkscape:connector-curvature="0"/>
<path id="path46" style="fill-rule:evenodd;fill:#c1aa76" d="m18.914 17.756c0.402 0.074 0.586-0.11 0.551-0.551-0.074-0.477-0.293-0.66-0.664-0.551-0.403 0.074-0.606 0.258-0.606 0.551-0.035 0.258 0.203 0.441 0.719 0.551z" inkscape:connector-curvature="0"/>
<path id="path48" style="fill-rule:evenodd;fill:#d9d2b8" d="m21.727 20.181c0.402 0.149 0.714 0.164 0.937 0.055 0.219-0.074 0.109-0.273-0.332-0.605-0.477-0.333-0.844-0.368-1.102-0.114-0.257 0.262-0.093 0.481 0.497 0.664z" inkscape:connector-curvature="0"/>
<path id="path50" style="fill-rule:evenodd;fill:#f9f5ea" d="m2.535 16.709 4.965 3.804c1.066-0.332 2.223-0.515 3.473-0.55 1.215-0.04 1.965-0.168 2.261-0.387l-4.3-3.309c-0.774 0.11-1.786 0.184-3.036 0.219l-3.363 0.223z" inkscape:connector-curvature="0"/>
<path id="path52" style="fill-rule:evenodd;fill:#e8e1c5" d="m2.867 17.095 3.86 0.11c0.625-0.035 1.468-0.278 2.535-0.715l0.828-7.281-0.77 0.222-5.351 0.77-1.102 6.894z" inkscape:connector-curvature="0"/>
<path id="path54" style="fill-rule:evenodd;fill:#a79e81" d="m9.262 16.486 3.972 3.09 1.157-6.895c-0.442-0.441-0.938-0.883-1.489-1.32-0.515-0.48-1.449-1.195-2.812-2.152l-0.828 7.277z" inkscape:connector-curvature="0"/>
<path id="path56" style="fill-rule:evenodd;fill:#c1aa76" d="m7.004 12.24c0.625 0.297 1.101 0.242 1.434-0.164 0.292-0.406 0.074-0.809-0.665-1.211-0.695-0.371-1.117-0.297-1.265 0.219-0.149 0.515 0.015 0.902 0.496 1.156z" inkscape:connector-curvature="0"/>
<path id="path58" style="fill-rule:evenodd;fill:#d9d2b8" d="m9.207 19.298c0.59 0.442 1.051 0.442 1.379 0 0.332-0.437 0.297-0.753-0.109-0.937-0.403-0.145-0.829-0.109-1.27 0.113-0.441 0.219-0.441 0.496 0 0.824z" inkscape:connector-curvature="0"/>
<path id="path60" style="fill-rule:evenodd;fill:#c9bf9c" d="m11.082 16.818c0.59 0.258 0.922 0.074 0.992-0.551 0.039-0.59-0.238-1.086-0.824-1.488-0.551-0.367-0.793-0.148-0.719 0.66 0.074 0.774 0.258 1.231 0.551 1.379z" inkscape:connector-curvature="0"/>
<path id="path62" style="fill-rule:evenodd;fill:#c1aa76" d="m4.523 14.998c0.329 0.222 0.551 0.109 0.661-0.328 0.148-0.442 0.035-0.7-0.332-0.774-0.403-0.074-0.661 0.02-0.77 0.277-0.148 0.254 0 0.532 0.441 0.825z" inkscape:connector-curvature="0"/>
<path id="path64" style="fill-rule:evenodd;fill:#d9d2b8" d="m6.012 18.361c0.254 0.297 0.511 0.441 0.769 0.441 0.258 0.039 0.258-0.183 0-0.66-0.293-0.515-0.605-0.719-0.937-0.605-0.367 0.144-0.313 0.422 0.168 0.824z" inkscape:connector-curvature="0"/>
<path id="path66" style="fill-rule:evenodd;fill:#f9f5ea" d="m10.863 15.22 5.512 2.977 0.937-0.441c0.813-0.293 1.602-0.516 2.376-0.661 1.21-0.257 1.945-0.515 2.203-0.773l-4.797-2.535c-0.735 0.219-1.707 0.457-2.922 0.715l-3.309 0.718z" inkscape:connector-curvature="0"/>
<path id="path68" style="fill-rule:evenodd;fill:#e8e1c5" d="m11.195 15.603 3.86-0.551c0.625-0.109 1.433-0.476 2.425-1.101l-0.386-7.336-0.715 0.332-5.184 1.656v7z" inkscape:connector-curvature="0"/>
<path id="path70" style="fill-rule:evenodd;fill:#c1aa76" d="m15.824 14.67 1.27-0.883c0.441-0.406 0.293-0.699-0.442-0.883-0.515-0.148-0.882 0.09-1.101 0.715-0.223 0.625-0.129 0.976 0.273 1.051z" inkscape:connector-curvature="0"/>
<path id="path72" style="fill-rule:evenodd;fill:#a79e81" d="m20.238 8.271-3.144-1.656 0.386 7.336 4.411 2.371v-6.949l-1.653-1.102z" inkscape:connector-curvature="0"/>
<path id="path74" style="fill-rule:evenodd;fill:#c9bf9c" d="m20.512 14.006c0.441 0.183 0.664 0.054 0.664-0.387 0-0.403-0.184-0.645-0.551-0.715-0.371-0.074-0.59 0.035-0.664 0.332-0.109 0.293 0.074 0.551 0.551 0.77z" inkscape:connector-curvature="0"/>
<path id="path76" style="fill-rule:evenodd;fill:#c1aa76" d="m14.5 10.091c0.699 0.184 1.16 0.055 1.379-0.386 0.258-0.477-0.016-0.844-0.824-1.102-0.774-0.258-1.18-0.113-1.215 0.442-0.074 0.55 0.148 0.898 0.66 1.046z" inkscape:connector-curvature="0"/>
<path id="path78" style="fill-rule:evenodd;fill:#d9d2b8" d="m17.809 16.709c0.664 0.332 1.121 0.257 1.382-0.223 0.293-0.477 0.2-0.77-0.277-0.883-0.406-0.109-0.809-0.015-1.215 0.278-0.402 0.332-0.367 0.605 0.11 0.828z" inkscape:connector-curvature="0"/>
<path id="path80" style="fill-rule:evenodd;fill:#c9bf9c" d="m19.301 11.634c0.625 0.149 0.918-0.089 0.879-0.714-0.071-0.625-0.422-1.067-1.047-1.325-0.586-0.257-0.789 0-0.606 0.774 0.184 0.734 0.442 1.156 0.774 1.265z" inkscape:connector-curvature="0"/>
<path id="path82" style="fill-rule:evenodd;fill:#c1aa76" d="m12.516 13.236c0.367 0.145 0.57 0 0.609-0.441 0.07-0.446-0.074-0.664-0.441-0.664-0.407 0-0.645 0.128-0.719 0.386-0.11 0.258 0.074 0.496 0.551 0.719z" inkscape:connector-curvature="0"/>
<path id="path84" style="fill-rule:evenodd;fill:#d9d2b8" d="m14.5 16.322c0.332 0.219 0.625 0.332 0.883 0.332 0.258-0.039 0.222-0.258-0.11-0.664-0.367-0.477-0.714-0.625-1.046-0.442-0.332 0.184-0.239 0.442 0.273 0.774z" inkscape:connector-curvature="0"/>
<path id="path86" style="fill-rule:evenodd;fill:#dbdbdb" d="m27.184 4.193-9.153-4.191-14.172 3.308-3.859 8.988 18.195-4.246 13.235 5.735-4.246-9.594z" inkscape:connector-curvature="0"/>
<path id="path88" style="fill-rule:evenodd;fill:#b2b2b2" d="m18.746 6.783 12.297 5.348-3.859-7.938-9.153-4.191 0.715 6.781z" inkscape:connector-curvature="0"/>
<path id="path90" style="fill-rule:evenodd;fill:#f5f5f5" d="m31.43 13.787-0.551-1.875-12.133-5.129-18.582 4.023-0.164 1.492 19.133-4.027 12.297 5.516z" inkscape:connector-curvature="0"/>
<path id="path92" style="fill-rule:evenodd;fill:#e4e4e4" d="m5.293 3.42-0.77 6.781 10.532-2.59-4.028-5.074-5.734 0.883z" inkscape:connector-curvature="0"/>
<path id="path94" style="fill-rule:evenodd;fill:#949494" d="m30.16 11.193-2.754-6.617-9.375-4.574c2.793 2.574 4.926 4.464 6.395 5.679 1.472 1.211 3.383 3.051 5.734 5.512z" inkscape:connector-curvature="0"/>
<path id="path96" style="fill-rule:evenodd;fill:#bdbf02" d="m13.949 17.756c-1.687 2.132-2.719 3.492-3.086 4.082l-2.758 5.898c0.957-1.469 2.059-2.758 3.309-3.859 1.215-1.102 2.059-3.145 2.535-6.121z" inkscape:connector-curvature="0"/>
<path id="path98" style="fill-rule:evenodd;fill:#586436" d="m13.621 26.634c0.219-2.574 0.328-4.171 0.328-4.796v-4.082c-0.734 1.984-1.101 3.234-1.101 3.75l0.773 5.128z" inkscape:connector-curvature="0"/>
<path id="path100" style="fill-rule:evenodd;fill:#90a701" d="m8.438 27.185 2.976-3.308c0.734-0.844 1.285-1.766 1.652-2.758v-0.387l-2.976 2.594c-0.219 0.219-0.57 0.937-1.047 2.148-0.219 0.59-0.422 1.16-0.605 1.711z" inkscape:connector-curvature="0"/>
</g>
</g>
<metadata><rdf:RDF><cc:Work><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/><dc:publisher><cc:Agent rdf:about="http://openclipart.org/"><dc:title>Openclipart</dc:title></cc:Agent></dc:publisher></cc:Work><cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/"><cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/><cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/><cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/></cc:License></rdf:RDF></metadata></svg>

After

Width:  |  Height:  |  Size: 12 KiB

View File

@@ -0,0 +1,54 @@
{% extends "base.html" %}
{% block head_lead %}
<title>{{ config["SITE_NAME"] }}</title>
{% endblock %}
{% block style %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/home.css') }}">
{% endblock %}
{% block body %}
<main class="home">
<header>
{% trans site_name=config["SITE_NAME"], logo_url=url_for("static", filename="img/tofu.svg") %}
<img src="{{ logo_url }}" alt="{{ site_name }}" />
{% endtrans %}
<h1>{{ config["SITE_NAME"] }}</h1>
</header>
<section class="icons">
<a href="https://compliance.conversations.im/server/{{ config['SNIKKET_DOMAIN'] }}"
><img src="https://compliance.conversations.im/badge/{{ config['SNIKKET_DOMAIN'] }}"></a>
</section>
<section class="intro">
<p>{% trans site_name=config["SITE_NAME"], about_page=url_for('main.about') %}
<em>{{ site_name }}</em> is an XMPP (Jabber) server hosted by
<a href="https://www.davejansen.com/" rel="external" target="_blank">Dave Jansen</a>
using open-source software from <a href="{{ about_page }}">the Snikket project</a>.
{% endtrans %}</p>
{%- if config["ADMIN_CONTACT"] -%}
<p>
{% trans admin_contact=config["ADMIN_CONTACT"] %}
To reach out, send a message to <a href="xmpp:{{ admin_contact }}">{{ admin_contact }}</a> or
<a href="mailto:{{ admin_contact }}">via email</a>.
{% endtrans %}
</p>
{%- endif -%}
</section>
<footer>
<nav>
<a href="https://xmpp.org/getting-started/" rel="external" target="_blank">
{% trans %}Need an XMPP (Jabber) client?{% endtrans %}
</a>
<a href="{{ url_for('main.login') }}">
{% trans site_name=config["SITE_NAME"] %}Need to manage your {{ site_name }} account?{% endtrans %}
</a>
</p>
</footer>
</main>
{% endblock %}