web: add footer

1 year ago · 3523bc86c7
parent a3f0808cd4
commit 3523bc86c7
4 changed files with 44 additions and 8 deletions
--- a/public/index.html
+++ b/public/index.html
@ -10,7 +10,10 @@
 <body>
    <script id="nyano-config" type="application/json">
        {
-            "maxNoteChars": 500
+            "about_url": "https://nyanoblog.org",
+            "max_note_chars": 500,
+            "source_url": "https://git.bsd.gay/nyanogang/nyanoblog",
+            "version": "0.1.0"
        }
    </script>
    <nyano-blog unresolved></nyano-blog>
--- a/public/theme.css
+++ b/public/theme.css
@ -9,16 +9,19 @@

    /* text on background-color */
    --text-color: #eaddf4;
+    /* less important text on background-color and base-color */
+    --text-faint-color: #84778e;

    /* color for buttons, links, etd */
    --accent-color: #a017df;
    /* clicked/hovered elements in accent-color */
    --accent-highlight-color: #c356f4;
-    /* text on accent color */
+    /* text on accent-color */
    --accent-text-color: #e0d1e1;
+    /* text on accent-highlight-color */
    --accent-highlight-text-color: var(--accent-text-color);

-    --success-color: #00ff00;
+    --success-color: #23b548;
    --warning-color: #d78318;
    --error-color: #f21736;

@ -29,6 +32,7 @@

    --font-family: "Source Sans 3", sans-serif;

+    /* small animations, like color fades or button squishes */
    --anim-duration-short: 60ms;
 }

--- a/src/web/app.ts
+++ b/src/web/app.ts
@ -1,6 +1,9 @@
-import {LitElement, html} from "lit";
+import {LitElement, html, css} from "lit";
 import {customElement} from "lit/decorators.js";
-import {msg} from "@lit/localize";
+import {msg, str} from "@lit/localize";
+
+import {aboutURL, sourceURL, version} from "./config";
+import withSharedStyles from "./theme";

 import "./components/header-bar";
 import "./features/compose-form";
@ -17,7 +20,15 @@ export default class NyanoBlog extends LitElement {
                    <compose-form></compose-form>
                </side-panel>

-                <div slot="left-bottom">bottom left slot</div>
+                <footer slot="left-bottom">
+                    <p>
+                        ${msg(str`Powered by nyano v${version}`)}
+                        <br>
+                        <a href="${aboutURL}">${msg("About")}</a>
+                        &#183;
+                        <a href="${sourceURL}">${msg("Source code")}</a>
+                    </p>
+                </footer>

                <div slot="main">
                    <header-bar></header-bar>
@ -45,4 +56,16 @@ export default class NyanoBlog extends LitElement {
            </column-layout>
        `;
    }
+
+    static get styles() {
+        return withSharedStyles(css`
+            footer {
+                color: var(--text-faint-color);
+            }
+
+            footer a, footer a:visited {
+                color: var(--text-faint-color);
+            }
+        `);
+    }
 }
--- a/src/web/config.ts
+++ b/src/web/config.ts
@ -1,9 +1,15 @@
 export interface Config {
-    maxNoteChars: number,
+    about_url: string,
+    max_note_chars: number,
+    source_url: string,
+    version: string,
 }

 const config: Config = JSON.parse(document.getElementById("nyano-config").innerText);
 export default config;

+export const aboutURL = config.about_url;
 /** Maximum number of Unicode code points per note, including CW */
-export const maxNoteChars = config.maxNoteChars;
+export const maxNoteChars = config.max_note_chars;
+export const sourceURL = config.source_url;
+export const version = config.version;