qr code

package.json

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "dev:docker": "docker-compose up redis",
+    "dev:docker": "docker-compose -f docker-compose.dev.yaml up redis",
     "dev:packages": "pnpm --parallel run dev",
     "dev:proxy": "node proxy.mjs",
     "dev": "run-p dev:*",

packages/frontend/package.json

@@ -32,6 +32,7 @@
 		"copy-to-clipboard": "^3.3.3",
 		"dompurify": "^2.4.1",
 		"file-saver": "^2.0.5",
-		"pretty-bytes": "^6.0.0"
+		"pretty-bytes": "^6.0.0",
+		"qrious": "^4.0.2"
 	}
 }

packages/frontend/src/lib/ui/Canvas.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import QR from 'qrious'
+
+	import { getCSSVariable } from '$lib/utils'
+
+	export let label: string
+	export let value: string
+
+	let canvas: HTMLCanvasElement
+
+	$: {
+		new QR({
+			value,
+			level: 'Q',
+			size: 800,
+			background: getCSSVariable('--ui-bg-0'),
+			foreground: getCSSVariable('--ui-text-0'),
+			element: canvas,
+		})
+	}
+</script>
+
+<small>{label}</small>
+<div>
+	<canvas bind:this={canvas} />
+</div>
+
+<style>
+	div {
+		padding: 0.5rem;
+		width: fit-content;
+		border: 2px solid var(--ui-bg-1);
+		background-color: var(--ui-bg-0);
+		margin-top: 0.125rem;
+	}
+
+	canvas {
+		width: 100%;
+		height: auto;
+	}
+</style>

packages/frontend/src/lib/ui/NoteResult.svelte

@@ -10,9 +10,12 @@
 
 	import Button from '$lib/ui/Button.svelte'
 	import TextInput from '$lib/ui/TextInput.svelte'
+	import Canvas from './Canvas.svelte'
 
 	export let result: NoteResult
 
+	$: url = `${window.location.origin}/note/${result.id}#${result.password}`
+
 	function reset() {
 		window.location.reload()
 	}
@@ -22,11 +25,15 @@
 	type="text"
 	readonly
 	label={$t('common.share_link')}
-	value="{window.location.origin}/note/{result.id}#{result.password}"
+	value={url}
 	copy
 	data-testid="share-link"
 />
-<br />
+
+<div>
+	<Canvas label={'qr code'} value={url} />
+</div>
+
 <p>
 	{@html $t('home.new_note_notice')}
 </p>
@@ -34,4 +41,9 @@
 <Button on:click={reset}>{$t('home.new_note')}</Button>
 
 <style>
+	div {
+		width: min(12rem, 100%);
+		margin-top: 1rem;
+		margin-bottom: 1rem;
+	}
 </style>

packages/frontend/src/lib/utils.ts

@@ -9,3 +9,8 @@ export function copy(value: string) {
 	const msg = get(t)('common.copied_to_clipboard')
 	notify.success(msg)
 }
+
+export function getCSSVariable(variable: string): string {
+	if (typeof window === 'undefined') return ''
+	return window.getComputedStyle(window.document.body).getPropertyValue(variable)
+}

pnpm-lock.yaml

@@ -32,6 +32,7 @@ importers:
       dotenv: ^16.0.3
       file-saver: ^2.0.5
       pretty-bytes: ^6.0.0
+      qrious: ^4.0.2
       svelte: ^3.55.0
       svelte-check: ^2.10.3
       svelte-intl-precompile: ^0.10.1
@@ -45,6 +46,7 @@ importers:
       dompurify: 2.4.1
       file-saver: 2.0.5
       pretty-bytes: 6.0.0
+      qrious: 4.0.2
     devDependencies:
       '@lokalise/node-api': 9.3.0
       '@sveltejs/adapter-static': 1.0.0_@sveltejs+kit@1.0.1
@@ -1690,6 +1692,10 @@ packages:
     engines: {node: ^14.13.1 || >=16.0.0}
     dev: false
 
+  /qrious/4.0.2:
+    resolution: {integrity: sha512-xWPJIrK1zu5Ypn898fBp8RHkT/9ibquV2Kv24S/JY9VYEhMBMKur1gHVsOiNUh7PHP9uCgejjpZUHUIXXKoU/g==}
+    dev: false
+
   /queue-microtask/1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true

proxy.mjs

@@ -3,12 +3,13 @@ import httpProxy from 'http-proxy'
 
 const proxy = httpProxy.createProxyServer()
 proxy.on('error', function (err, req, res) {
+  console.error(err)
   res.writeHead(500, { 'Content-Type': 'text/plain' })
   res.end('500 Internal Server Error')
 })
 
 const server = http.createServer(function (req, res) {
-  const target = req.url.startsWith('/api/') ? 'http://localhost:5000' : 'http://localhost:3000'
+  const target = req.url.startsWith('/api/') ? 'http://127.0.0.1:5000' : 'http://localhost:3000'
   proxy.web(req, res, { target })
 })
 server.listen(1234)