commit 45ca85c6db1a0be5ad15c9b637eb9c5b29aa753c
parent 60bc14bf3e51bb4f0a54e2704ddc76ead7c8fb04
Author: FIGBERT <figbert@figbert.com>
Date: Mon, 26 Feb 2024 17:30:27 -0800
Create initial static dashboard
Diffstat:
| M | Cargo.toml | | | 4 | ++++ |
| M | src/main.rs | | | 67 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- |
| A | templates/index.html | | | 98 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
3 files changed, 167 insertions(+), 2 deletions(-)
diff --git a/Cargo.toml b/Cargo.toml
@@ -6,3 +6,7 @@ edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
+askama = "0.12.1"
+askama_axum = "0.4.0"
+axum = "0.7.4"
+tokio = { version = "1.36.0", features = ["full"] }
diff --git a/src/main.rs b/src/main.rs
@@ -1,3 +1,66 @@
-fn main() {
- println!("Hello, world!");
+use askama::Template;
+use axum::{routing::get, Router};
+
+const COLORS: [&str; 19] = [
+ "AccentColor",
+ "AccentColorText",
+ "ActiveText",
+ "ButtonBorder",
+ "ButtonFace",
+ "ButtonText",
+ "Canvas",
+ "CanvasText",
+ "Field",
+ "FieldText",
+ "GrayText",
+ "Highlight",
+ "HighlightText",
+ "LinkText",
+ "Mark",
+ "MarkText",
+ "SelectedItem",
+ "SelectedItemText",
+ "VisitedText",
+];
+const DEPRECATED: [&str; 23] = [
+ "ActiveBorder",
+ "ActiveCaption",
+ "AppWorkspace",
+ "Background",
+ "ButtonHighlight",
+ "ButtonShadow",
+ "CaptionText",
+ "InactiveBorder",
+ "InactiveCaption",
+ "InactiveCaptionText",
+ "InfoBackground",
+ "InfoText",
+ "Menu",
+ "MenuText",
+ "Scrollbar",
+ "ThreeDDarkShadow",
+ "ThreeDFace",
+ "ThreeDHighlight",
+ "ThreeDLightShadow",
+ "ThreeDShadow",
+ "Window",
+ "WindowFrame",
+ "WindowText",
+];
+
+#[derive(Template)]
+#[template(path = "index.html")]
+struct IndexTemplate {}
+
+#[tokio::main]
+async fn main() {
+ let app = Router::new().route("/", get(root));
+ let listener = tokio::net::TcpListener::bind("127.0.0.1:3000")
+ .await
+ .unwrap();
+ axum::serve(listener, app).await.unwrap();
+}
+
+async fn root() -> IndexTemplate {
+ IndexTemplate {}
}
diff --git a/templates/index.html b/templates/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>CSS System Colors Dashboard</title>
+ <meta name="description" content="A visual grid of CSS system colors, by figbert.">
+ <style>
+ :root {
+ color-scheme: light dark;
+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+ }
+
+ header {
+ text-align: center;
+ line-height: 90%;
+ }
+
+ main {
+ width: 75%;
+ margin-inline: auto;
+ }
+
+ .colors {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ }
+
+ figure {
+ margin-inline: 0;
+ }
+
+ section {
+ width: 6em;
+ height: 6em;
+ margin-inline: 1em;
+ margin-block: 1em;
+ box-shadow: 0.25em 0.25em 0.25em 0.25em rgb(0 0 0 / 20%);
+ border: solid;
+ border-radius: 1em;
+ }
+
+ #about {
+ max-width: 50ch;
+ border: solid;
+ box-shadow: 0.25em 0.25em 0.5em 0.25em rgb(0 0 0 / 20%);
+ padding: 2em;
+ margin-inline: auto;
+ margin-block: 5em;
+ border-radius: 1em;
+ }
+
+ footer {
+ text-align: center;
+ }
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>CSS System Colors Dashboard</h1>
+ <h2>by <a href="https://figbert.com">figbert</a></h2>
+ </header>
+ <main>
+ <h3>Colors</h3>
+ <div class="colors">
+ {% for color in crate::COLORS %}
+ <figure>
+ <section style="background-color: {{ color }};"></section>
+ <figcaption style="text-align: center;">{{ color }}</figcaption>
+ </figure>
+ {% endfor %}
+ </div>
+ <h3>Deprecated</h3>
+ <p>These values have been deprecated for use on public web pages.
+ You may or may not see a color.</p>
+ <div class="colors">
+ {% for color in crate::DEPRECATED %}
+ <figure>
+ <section style="background-color: {{ color }};"></section>
+ <figcaption style="text-align: center;">{{ color }}</figcaption>
+ </figure>
+ {% endfor %}
+ </div>
+ <div id="about">
+ <h3>About</h3>
+ <p>Jim Nielsen's <a
+ href="https://blog.jim-nielsen.com/2021/css-system-colors/">CSS
+ System Colors</a> introduced me to the concept of native colors
+ in CSS. Now I use them all the time! MDN has <a
+ href="https://developer.mozilla.org/en-US/docs/Web/CSS/system-color">a
+ great list</a>. But it's not visual.</p>
+ <p>So: a grid.</p>
+ </div>
+ </main>
+ <footer>✡︎</footer>
+ </body>
+</html>
