typos

.github/workflows/docker.yml

@@ -32,7 +32,7 @@ jobs:
         id: docker_build
         uses: docker/build-push-action@v2
         with:
-          platforms: linux/amd64,linux/arm64
+          # platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}
       - name: Image digest

CHANGELOG.md

@@ -5,6 +5,23 @@ 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.8] - 2021-05-05
+
+### Added
+
+- Manual theme override option
+
+### Fixed
+
+- Removed Arm builds for now
+- iOS style bugs
+
+## [1.0.7] - 2021-05-04
+
+### Added
+
+- Arm images
+
 ## [1.0.6] - 2021-05-04
 
 ### Added

Dockerfile

@@ -1,7 +1,7 @@
 FROM node:16-alpine as CLIENT
 
 WORKDIR /tmp
-COPY ./client .
+COPY ./client ./
 
 RUN npm ci
 RUN npm run build
@@ -10,7 +10,7 @@ FROM rust:1.51-alpine as RUST
 
 WORKDIR /tmp
 RUN apk add libc-dev openssl-dev alpine-sdk
-COPY ./Cargo* .
+COPY ./Cargo* ./
 COPY ./src ./src
 
 RUN cargo build --release

README.md

@@ -17,7 +17,7 @@ Check out the demo and see for yourself https://cryptgeon.nicco.io.
 ## Features
 
 - server cannot decrypt contents due to client side encryption
-- view and time constrains
+- view and time constraints
 - in memory, no persistence
 - obligatory dark mode support
 
@@ -45,6 +45,8 @@ services:
 
   app:
     image: cupcakearmy/cryptgeon:latest
+    depends_on:
+      - memcache
     ports:
       - 80:5000
 ```

client/src/app.css

@@ -7,29 +7,46 @@
 :root {
 	font-family: 'Fira Mono', monospace;
 
-	--ui-bg-0: #fefefe;
-	--ui-bg-0-85: #fefefed9;
-	--ui-bg-1: #eee;
-	--ui-bg-2: #e2e2e2;
-	--ui-text-0: #111;
-	--ui-text-1: #222;
+	--ui-bg-0: #111;
+	--ui-bg-0-85: #111111d9;
+	--ui-bg-1: #333;
+	--ui-bg-2: #444;
+	--ui-text-0: #fefefe;
+	--ui-text-1: #eee;
 	--ui-clr-primary: hsl(186, 65%, 55%);
 	--ui-clr-error: hsl(357, 77%, 51%);
 
 	--ui-anim: all 150ms ease;
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
 	: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;
+		--ui-bg-0: #fefefe;
+		--ui-bg-0-85: #fefefed9;
+		--ui-bg-1: #eee;
+		--ui-bg-2: #e2e2e2;
+		--ui-text-0: #111;
+		--ui-text-1: #333;
 	}
 }
 
+:root[theme='dark'] {
+	--ui-bg-0: #111 !important;
+	--ui-bg-0-85: #111111d9 !important;
+	--ui-bg-1: #333 !important;
+	--ui-bg-2: #444 !important;
+	--ui-text-0: #fefefe !important;
+	--ui-text-1: #eee !important;
+}
+:root[theme='light'] {
+	--ui-bg-0: #fefefe !important;
+	--ui-bg-0-85: #fefefed9 !important;
+	--ui-bg-1: #eee !important;
+	--ui-bg-2: #e2e2e2 !important;
+	--ui-text-0: #111 !important;
+	--ui-text-1: #333 !important;
+}
+
 .error-text {
 	color: var(--ui-clr-error);
 }
@@ -61,6 +78,8 @@ input,
 textarea,
 button {
 	appearance: none;
+	-webkit-appearance: none;
+	border-radius: 0;
 	transition: var(--ui-anim);
 	font-family: inherit;
 	font-size: inherit;

client/src/lib/ui/ThemeToggle.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" context="module">
+	import { writable } from 'svelte/store'
+
+	export enum Theme {
+		Dark = 'dark',
+		Light = 'light',
+		Auto = 'auto',
+	}
+
+	const NextTheme = {
+		[Theme.Auto]: Theme.Light,
+		[Theme.Light]: Theme.Dark,
+		[Theme.Dark]: Theme.Auto,
+	}
+
+	function init(): Theme {
+		if (typeof window !== 'undefined') {
+			const saved = window.localStorage.getItem('theme') as Theme
+			console.log(Theme, window.localStorage.getItem('theme'))
+			if (Object.values(Theme).includes(saved)) return saved
+		}
+		return Theme.Auto
+	}
+
+	export const theme = writable<Theme>(init())
+
+	theme.subscribe((theme) => {
+		if (typeof window !== 'undefined') {
+			window.localStorage.setItem('theme', theme)
+			const html = window.document.getElementsByTagName('html')[0]
+			html.setAttribute('theme', theme)
+		}
+	})
+</script>
+
+<script lang="ts">
+	import Icon from '$lib/ui/Icon.svelte'
+
+	function change() {
+		theme.update((current) => NextTheme[current])
+	}
+</script>
+
+<div on:click={change}>
+	<Icon class="icon" icon="contrast-sharp" />
+	{$theme}
+</div>
+
+<style>
+	div :global(.icon) {
+		height: 1rem;
+		width: 1rem;
+		margin-right: 0.5rem;
+	}
+
+	div {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		align-items: center;
+		cursor: pointer;
+	}
+</style>

client/src/lib/views/Footer.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import Icon from '$lib/ui/Icon.svelte'
+	import ThemeToggle from '$lib/ui/ThemeToggle.svelte'
+</script>
+
+<footer>
+	<ThemeToggle />
+	<nav>
+		<a href="/">/home</a>
+		<a href="/about">/about</a>
+		<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener">/code</a>
+	</nav>
+</footer>
+
+<style>
+	footer {
+		display: flex;
+		justify-content: space-between;
+		padding: 1rem;
+		position: fixed;
+		bottom: 0;
+		right: 0;
+		width: 100%;
+		background-color: var(--ui-bg-0-85);
+	}
+
+	a {
+		margin: 0 0.5rem;
+	}
+
+	nav {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		align-items: center;
+	}
+</style>

client/src/lib/views/Header.svelte

@@ -8,7 +8,6 @@
 			xmlns="http://www.w3.org/2000/svg"
 			xmlns:xlink="http://www.w3.org/1999/xlink"
 			xml:space="preserve"
-			xmlns:serif="http://www.serif.com/"
 			style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
 			><g
 				><clipPath id="_clip1"><rect x="6.336" y="3.225" width="193.55" height="193.55" /></clipPath
@@ -78,5 +77,6 @@
 		width: 100%;
 		max-width: 16rem;
 		transform: translateX(-1rem);
+		fill: currentColor;
 	}
 </style>

client/src/routes/$layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Footer from '$lib/views/Footer.svelte'
 	import Header from '$lib/views/Header.svelte'
 
 	import '../app.css'
@@ -13,16 +14,9 @@
 	<slot />
 </main>
 
-<footer>
-	<a href="/">/home</a>
-	<a href="/about">/about</a>
-	<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener">/code</a>
-</footer>
+<Footer />
 
 <style>
-	a {
-		margin: 0 0.5rem;
-	}
 	main {
 		padding: 1rem;
 		padding-bottom: 4rem;
@@ -30,17 +24,4 @@
 		max-width: 35rem;
 		margin: 0 auto;
 	}
-
-	footer {
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-end;
-		align-items: center;
-		padding: 1rem;
-		position: fixed;
-		bottom: 0;
-		right: 0;
-		width: 100%;
-		background-color: var(--ui-bg-0-85);
-	}
 </style>

client/src/routes/about.svelte

@@ -13,7 +13,7 @@
 	<h1>About</h1>
 
 	<p>
-		<i>cryptgeon</i> is an secure, open source sharing note service inspired by
+		<i>cryptgeon</i> is a secure, open source sharing note service inspired by
 		<a href="https://privnote.com"><i>PrivNote</i></a>.
 	</p>
 
@@ -27,7 +27,7 @@
 	<b>▶ Features</b>
 	<ul>
 		<li>server cannot decrypt contents due to client side encryption</li>
-		<li>view and time constrains</li>
+		<li>view and time constraints</li>
 		<li>in memory, no persistence</li>
 	</ul>
 

client/static/icons/contrast-sharp.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Contrast</title><path d='M256 32C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224S379.71 32 256 32zM128.72 383.28A180 180 0 01256 76v360a178.82 178.82 0 01-127.28-52.72z'/></svg>

docker-compose.yml

@@ -12,5 +12,7 @@ services:
 
   app:
     build: .
+    depends_on:
+      - memcached
     ports:
       - 80:5000