theming

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [2.0.0-rc.0] - 2022
 
+### Added
+
+- Theming for logo and description text
+
 ### Changed
 
 - Moved to redis

Dockerfile

@@ -21,6 +21,6 @@ WORKDIR /app
 COPY ./entry.sh .
 COPY --from=backend /tmp/target/release/cryptgeon .
 COPY --from=client /tmp/build ./frontend/build
-ENV REDIS=redis://127.0.0.1/
+ENV REDIS=redis://redis/
 EXPOSE 5000
 ENTRYPOINT [ "/app/entry.sh" ]

README.md

@@ -51,12 +51,14 @@ of the notes even if it tried to.
 ## Environment Variables
 
 | Variable         | Default          | Description                                                                                                               |
-| ---------------- | ----------------- | --------------------------------------------------------------------------------------- |
+| ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| `MEMCACHE`       | `memcached:11211` | Memcached URL to connect to.                                                            |
+| `REDIS`          | `redis://redis/` | Redis URL to connect to.                                                                                                  |
-| `SIZE_LIMIT`     | `1 KiB`           | Max size for body. Accepted values according to [byte-unit](https://docs.rs/byte-unit/) |
+| `SIZE_LIMIT`     | `1 KiB`          | Max size for body. Accepted values according to [byte-unit](https://docs.rs/byte-unit/). `512 MiB` is the maximum allowed |
 | `MAX_VIEWS`      | `100`            | Maximal number of views.                                                                                                  |
 | `MAX_EXPIRATION` | `360`            | Maximal expiration in minutes.                                                                                            |
 | `ALLOW_ADVANCED` | `true`           | Allow custom configuration. If set to `false` all notes will be one view only.                                            |
+| `THEME_IMAGE`    | `""`             | Custom image for replacing the logo. Must be publicly reachable                                                           |
+| `THEME_TEXT`     | `""`             | Custom text for replacing the description below the logo                                                                  |
 
 ## Deployment
 
@@ -132,7 +134,7 @@ services:
 **Requirements**
 
 - `pnpm`: `>=6`
-- `node`: `>=14`
+- `node`: `>=16`
 - `rust`: edition `2021`
 
 **Install**
@@ -159,9 +161,9 @@ pnpm run dev
 
 Running `pnpm run dev` in the root folder will start the following things:
 
-- a memcache docker container
+- redis docker container
-- rust backend with hot reload
+- rust backend
-- client with hot reload
+- client
 
 You can see the app under [localhost:1234](http://localhost:1234).
 

backend/src/config.rs

@@ -1,9 +1,14 @@
 use byte_unit::Byte;
 
+// General
 lazy_static! {
     pub static ref VERSION: String = option_env!("CARGO_PKG_VERSION")
         .unwrap_or("Unknown")
         .to_string();
+}
+
+// CONFIG
+lazy_static! {
   pub static ref LIMIT: u32 =
     Byte::from_str(std::env::var("SIZE_LIMIT").unwrap_or("1 KiB".to_string()))
       .unwrap()
@@ -21,3 +26,15 @@ lazy_static! {
     .parse()
     .unwrap();
 }
+
+// THEME
+lazy_static! {
+    pub static ref THEME_IMAGE: String = std::env::var("THEME_IMAGE")
+        .unwrap_or("".to_string())
+        .parse()
+        .unwrap();
+    pub static ref THEME_TEXT: String = std::env::var("THEME_TEXT")
+        .unwrap_or("".to_string())
+        .parse()
+        .unwrap();
+}

backend/src/status/model.rs

@@ -2,9 +2,14 @@ use serde::{Deserialize, Serialize};
 
 #[derive(Serialize, Deserialize)]
 pub struct Status {
+    // General
     pub version: String,
+    // Config
     pub max_size: u32,
     pub max_views: u32,
     pub max_expiration: u32,
     pub allow_advanced: bool,
+    // Theme
+    pub theme_image: String,
+    pub theme_text: String,
 }

backend/src/status/routes.rs

@@ -11,6 +11,8 @@ async fn get_status() -> impl Responder {
         max_views: *config::MAX_VIEWS,
         max_expiration: *config::MAX_EXPIRATION,
         allow_advanced: *config::ALLOW_ADVANCED,
+        theme_image: config::THEME_IMAGE.to_string(),
+        theme_text: config::THEME_TEXT.to_string(),
     });
 }
 

frontend/src/lib/stores/status.ts

@@ -7,6 +7,8 @@ export type Status = {
 	max_views: number
 	max_expiration: number
 	allow_advanced: boolean
+	theme_image: string
+	theme_text: string
 }
 
 export const status = writable<null | Status>(null)

frontend/src/lib/views/Create.svelte

@@ -102,7 +102,7 @@
 	<Button on:click={reset}>{$t('home.new_note')}</Button>
 {:else}
 	<p>
-		{@html $t('home.intro')}
+		{@html $status?.theme_text || $t('home.intro')}
 	</p>
 	<form on:submit|preventDefault={submit}>
 		<fieldset disabled={loading}>

frontend/src/lib/views/Header.svelte

@@ -1,5 +1,12 @@
+<script lang="ts">
+	import { status } from '$lib/stores/status'
+</script>
+
 <header>
 	<a href="/">
+		{#if $status?.theme_image}
+			<img alt="logo" src={$status.theme_image} />
+		{:else}
 			<svg
 				width="100%"
 				height="100%"
@@ -10,7 +17,8 @@
 				xml:space="preserve"
 				style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
 				><g id="Logo"
-				><clipPath id="_clip1"><rect x="6.336" y="3.225" width="193.55" height="193.55" /></clipPath
+					><clipPath id="_clip1"
+						><rect x="6.336" y="3.225" width="193.55" height="193.55" /></clipPath
 					><g clip-path="url(#_clip1)"
 						><g
 							><g
@@ -73,6 +81,7 @@
 					></g
 				></svg
 			>
+		{/if}
 	</a>
 </header>
 
@@ -87,18 +96,24 @@
 		margin-bottom: 2rem;
 	}
 
+	img {
+		object-fit: contain;
+	}
+
 	@media screen and (max-width: 30rem) {
 		header {
 			margin-top: 1rem;
 			margin-bottom: 1rem;
 		}
 
-		header svg {
+		header svg,
+		header img {
 			max-height: 4rem;
 		}
 	}
 
-	header svg {
+	header svg,
+	header img {
 		width: 100%;
 		max-height: 8rem;
 		transform: translateX(-1rem);