Merge branch 'main' of https://github.com/cupcakearmy/cryptgeon

.gitattributes

@@ -1,2 +1 @@
 *.afdesign filter=lfs diff=lfs merge=lfs -text
-*.svg filter=lfs diff=lfs merge=lfs -text

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: cupcakearmy
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.gitignore

@@ -1 +1,10 @@
+
+# Backend
 /target
+
+# Client
+.DS_Store
+node_modules
+/.svelte
+/build
+/functions

CHANGELOG.md

@@ -0,0 +1,33 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.3] - 2021-05-02
+
+### Fixed
+
+- Higher default text area
+- Mobile touchups
+
+## [1.0.2] - 2021-05-02
+
+### Fixed
+
+- SVG Icons
+
+## [1.0.1] - 2021-05-02
+
+### Added
+
+- Dark mode support
+
+### Fixed
+
+- Don't reload data on wrong password
+
+## [1.0.0] - 2021-05-02
+
+Initial release

README.md

@@ -1,16 +1,25 @@
 <p align="center">
-<img src="./design/github.svg">
+<img src="./design/Github.png">
 </p>
 
+![Docker pulls badge](https://img.shields.io/docker/pulls/cupcakearmy/cryptgeon)
+![Docker image size badge](https://img.shields.io/docker/image-size/cupcakearmy/cryptgeon)
+![Latest version](https://img.shields.io/github/v/release/cupcakearmy/cryptgeon)
+
 ## About?
 
 _cryptgeon_ is an secure, open source sharing note service inspired by [_PrivNote_](https://privnote.com)
 
+## Demo
+
+Check out the demo and see for yourself https://cryptgeon.nicco.io.
+
 ## Features
 
 - view and time constrains
 - in memory, no persistence
 - in browser encryption → server cannot decrypt contents
+- obligatory dark mode support
 
 ## How does it work?
 
@@ -18,11 +27,11 @@ each note has a 512bit generated <i>id</i> that is used to retrieve the note. da
 
 ## Screenshot
 
-![screenshot](./design/screen.jpg)
+![screenshot](./design/Screens.png)
 
 ## Deployment
 
-Docker is the easiest way.
+Docker is the easiest way. There is the [official image here](https://hub.docker.com/r/cupcakearmy/cryptgeon).
 
 ```yaml
 # docker-compose.yml
@@ -40,6 +49,20 @@ services:
       - 80:5000
 ```
 
+## Development
+
+1. Clone
+2. run `npm i` in the root and and client `client/` folders.
+3. Run `npm run dev` to start development.
+
+Running `npm run dev` in the root folder will start the following things
+
+- a memcache docker container
+- rust backend with hot reload
+- client with hot reload
+
+You can see the app under [localhost:3000](http://localhost:3000).
+
 ###### Attributions
 
 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>

client/src/app.css

@@ -8,7 +8,7 @@
 	font-family: 'Fira Mono', monospace;
 
 	--ui-bg-0: #fefefe;
-	--ui-bg-0-85: #ffffffd9;
+	--ui-bg-0-85: #fefefed9;
 	--ui-bg-1: #eee;
 	--ui-bg-2: #e2e2e2;
 	--ui-text-0: #111;
@@ -19,6 +19,17 @@
 	--ui-anim: all 150ms ease;
 }
 
+@media (prefers-color-scheme: dark) {
+	:root {
+		--ui-bg-0: #111;
+		--ui-bg-0-85: #111111d9;
+		--ui-bg-1: #222;
+		--ui-bg-2: #282828;
+		--ui-text-0: #fefefe;
+		--ui-text-1: #eee;
+	}
+}
+
 .error-text {
 	color: var(--ui-clr-error);
 }
@@ -53,6 +64,13 @@ button {
 	transition: var(--ui-anim);
 	font-family: inherit;
 	font-size: inherit;
+	background: inherit;
+	color: inherit;
+}
+
+*:disabled,
+*[disabled='true'] {
+	opacity: 0.5;
 }
 
 fieldset {

client/src/lib/ui/TextArea.svelte

@@ -13,15 +13,20 @@
 <style>
 	textarea {
 		width: 100%;
-		min-height: 8rem;
+		min-height: calc(100vh - 30rem);
 		margin: 0;
-		padding: 0;
 		border: 2px solid var(--ui-bg-1);
 		resize: vertical;
 		outline: none;
 		padding: 0.5rem;
 	}
 
+	@media screen and (max-width: 30rem) {
+		textarea {
+			min-height: calc(100vh - 25rem);
+		}
+	}
+
 	textarea:hover,
 	textarea:focus {
 		border-color: var(--ui-clr-primary);

client/src/lib/ui/TextInput.svelte

@@ -32,7 +32,7 @@
 </script>
 
 <label>
-	<small>
+	<small disabled={$$restProps.disabled}>
 		{label}
 	</small>
 	<input bind:value {...$$restProps} />

client/src/lib/views/Header/index.svelte

@@ -62,8 +62,19 @@
 
 	header {
 		text-align: center;
-		margin-top: calc(min(15vh, 6rem));
-		margin-bottom: 4rem;
+		margin-top: 4rem;
+		margin-bottom: 2rem;
+	}
+
+	@media screen and (max-width: 30rem) {
+		header {
+			margin-top: 1rem;
+			margin-bottom: 1rem;
+		}
+
+		header svg {
+			max-height: 4rem;
+		}
 	}
 
 	header svg {

client/src/routes/note/[id].svelte

@@ -40,7 +40,7 @@
 	})
 
 	async function show() {
-		const data = await get(id)
+		const data = note || (await get(id)) // Don't get the content twice on wrong password.
 		if (needPassword) {
 			try {
 				const key = await getKeyFromString(password)
@@ -74,7 +74,11 @@
 			<Button type="submit">show note</Button>
 			{#if error}
 				<br />
-				<p class="error-text">wrong password. could not decipher.</p>
+				<p class="error-text">
+					wrong password. could not decipher.
+					<br />
+					note already destroyed. try again without reloading the page.
+				</p>
 			{/if}
 		</form>
 	{/if}

package.json

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "dev:docker": "docker-compose up memcached",
+    "dev:backend": "cargo watch -x 'run --bin cryptgeon'",
+    "dev:front": "npm --prefix client run dev",
+    "dev": "run-p dev:*"
+  },
+  "devDependencies": {
+    "npm-run-all": "^4.1.5"
+  }
+}