From c8b25394140015d6f43585b5461f7f9e24f4cf33 Mon Sep 17 00:00:00 2001
From: cupcakearmy <hi@nicco.io>
Date: Wed, 22 Dec 2021 15:20:30 +0100
Subject: [PATCH] add version in about page

---
 Cargo.lock                              |  2 +-
 Cargo.toml                              |  2 +-
 client/src/lib/stores/status.ts         |  2 +-
 client/src/lib/ui/AboutParagraph.svelte | 19 +++++++
 client/src/routes/about.svelte          | 72 ++++++++++++++-----------
 src/note/routes.rs                      |  8 ++-
 6 files changed, 70 insertions(+), 35 deletions(-)
 create mode 100644 client/src/lib/ui/AboutParagraph.svelte

diff --git a/Cargo.lock b/Cargo.lock
index 5586ee3..f6101c5 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -515,7 +515,7 @@ dependencies = [
 
 [[package]]
 name = "cryptgeon"
-version = "1.2.0"
+version = "1.3.0"
 dependencies = [
  "actix-files",
  "actix-web",
diff --git a/Cargo.toml b/Cargo.toml
index 339eb49..972354b 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "cryptgeon"
-version = "1.2.0"
+version = "1.3.0"
 authors = ["cupcakearmy <hi@nicco.io>"]
 edition = "2018"
 
diff --git a/client/src/lib/stores/status.ts b/client/src/lib/stores/status.ts
index 49ba919..436b9e2 100644
--- a/client/src/lib/stores/status.ts
+++ b/client/src/lib/stores/status.ts
@@ -1,8 +1,8 @@
 import { call } from '$lib/api'
-import { onMount } from 'svelte'
 import { writable } from 'svelte/store'
 
 export type Status = {
+	version: string
 	max_size: number
 }
 
diff --git a/client/src/lib/ui/AboutParagraph.svelte b/client/src/lib/ui/AboutParagraph.svelte
new file mode 100644
index 0000000..f796dac
--- /dev/null
+++ b/client/src/lib/ui/AboutParagraph.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let title: string
+</script>
+
+<p>
+	<b>▶ {title}</b>
+	<slot />
+</p>
+
+<style>
+	b {
+		display: block;
+		margin-bottom: 0.25rem;
+	}
+
+	p > :global(span) {
+		padding-left: 1.25em;
+	}
+</style>
diff --git a/client/src/routes/about.svelte b/client/src/routes/about.svelte
index dd25cb4..c417e41 100644
--- a/client/src/routes/about.svelte
+++ b/client/src/routes/about.svelte
@@ -1,5 +1,8 @@
 <script context="module">
 	import { browser, dev } from '$app/env'
+	import { status } from '$lib/stores/status'
+	import AboutParagraph from '$lib/ui/AboutParagraph.svelte'
+
 	export const hydrate = dev
 	export const router = browser
 	export const prerender = true
@@ -13,45 +16,52 @@
 	<h1>About</h1>
 
 	<p>
-		<i>cryptgeon</i> is a secure, open source sharing note service inspired by
+		<i>cryptgeon</i> is a secure, open source sharing note / file service inspired by
 		<a href="https://privnote.com"><i>PrivNote</i></a>.
 	</p>
 
-	<p>
-		<b>▶ how does it work?</b>
-		<br />
-		each note has a 512bit generated <i>id</i> that is used to retrieve the note. the note is then encrypted
-		with aes in gcm mode on the client side and then sent to the server. data is stored in memory and
-		never persisted to disk. the server never sees the encryption key and cannot decrypt the contents
-		of the notes even if it tried to.
-	</p>
+	<AboutParagraph title="how does it work?">
+		<span>
+			each note has a 512bit generated <i>id</i> that is used to retrieve the note. the note is then
+			encrypted with aes in gcm mode on the client side and then sent to the server. data is stored in
+			memory and never persisted to disk. the server never sees the encryption key and cannot decrypt
+			the contents of the notes even if it tried to.
+		</span>
+	</AboutParagraph>
 
-	<b>▶ features</b>
-	<ul>
-		<li>server cannot decrypt contents due to client side encryption</li>
-		<li>view and time constraints</li>
-		<li>in memory, no persistence</li>
-	</ul>
+	<AboutParagraph title="features">
+		<ul>
+			<li>server cannot decrypt contents due to client side encryption</li>
+			<li>view and time constraints</li>
+			<li>in memory, no persistence</li>
+		</ul>
+	</AboutParagraph>
 
-	<p>
-		<b>▶ tech stack</b>
-		<br />
-		the backend is written in rust and the frontend is svelte and typescript.
-		<br />
-		you are welcomed to check & audit the
-		<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener">source code</a
-		>.
-	</p>
+	<AboutParagraph title="tech stack">
+		<span>
+			the backend is written in rust and the frontend is svelte and typescript.
+			<br />
+			you are welcomed to check & audit the
+			<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener">
+				source code
+			</a>.
+		</span>
+	</AboutParagraph>
 
-	<p>
-		<br />
-		<b>▶ attributions</b>
-		<br />
-		<small>
+	<AboutParagraph title="attribution">
+		<span>
 			icons made by <a href="https://www.freepik.com" title="Freepik">freepik</a> from
 			<a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
-		</small>
-	</p>
+		</span>
+	</AboutParagraph>
+
+	<AboutParagraph title="version">
+		<span>
+			{#if $status}
+				<code>v{$status.version}</code>
+			{/if}
+		</span>
+	</AboutParagraph>
 </section>
 
 <style>
diff --git a/src/note/routes.rs b/src/note/routes.rs
index 5c1438c..6aa992e 100644
--- a/src/note/routes.rs
+++ b/src/note/routes.rs
@@ -107,13 +107,19 @@ async fn delete(path: web::Path<NotePath>) -> impl Responder {
 
 #[derive(Serialize, Deserialize)]
 struct Status {
+  version: String,
   max_size: usize,
 }
 
 #[get("/status")]
 async fn status() -> impl Responder {
   println!("Limit: {}", *LIMIT);
-  return HttpResponse::Ok().json(Status { max_size: *LIMIT });
+  return HttpResponse::Ok().json(Status {
+    version: option_env!("CARGO_PKG_VERSION")
+      .unwrap_or("Unknown")
+      .to_string(),
+    max_size: *LIMIT,
+  });
 }
 
 pub fn init(cfg: &mut web::ServiceConfig) {