layout additions

webapp/package-lock.json

@@ -9,11 +9,13 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"crypto-js": "^4.1.1",
+				"svelte-icons": "^2.1.0",
 				"svelte-markdown": "^0.2.2"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "next",
 				"@sveltejs/kit": "^1.0.0-next.350",
+				"@tailwindcss/typography": "^0.5.2",
 				"@types/crypto-js": "^4.1.1",
 				"@typescript-eslint/eslint-plugin": "^5.27.0",
 				"@typescript-eslint/parser": "^5.27.0",
@@ -262,6 +264,20 @@
 				}
 			}
 		},
+		"node_modules/@tailwindcss/typography": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.2.tgz",
+			"integrity": "sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==",
+			"dev": true,
+			"dependencies": {
+				"lodash.castarray": "^4.4.0",
+				"lodash.isplainobject": "^4.0.6",
+				"lodash.merge": "^4.6.2"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || insiders"
+			}
+		},
 		"node_modules/@types/crypto-js": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.1.1.tgz",
@@ -2223,6 +2239,18 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/lodash.castarray": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+			"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+			"dev": true
+		},
+		"node_modules/lodash.isplainobject": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+			"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+			"dev": true
+		},
 		"node_modules/lodash.merge": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3634,6 +3662,11 @@
 				"svelte": ">=3.19.0"
 			}
 		},
+		"node_modules/svelte-icons": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/svelte-icons/-/svelte-icons-2.1.0.tgz",
+			"integrity": "sha512-rHPQjweEc9fGSnvM0/4gA3pDHwyZyYsC5KhttCZRhSMJfLttJST5Uq0B16Czhw+HQ+HbSOk8kLigMlPs7gZtfg=="
+		},
 		"node_modules/svelte-markdown": {
 			"version": "0.2.2",
 			"resolved": "https://registry.npmjs.org/svelte-markdown/-/svelte-markdown-0.2.2.tgz",
@@ -4236,6 +4269,17 @@
 				"svelte-hmr": "^0.14.12"
 			}
 		},
+		"@tailwindcss/typography": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.2.tgz",
+			"integrity": "sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==",
+			"dev": true,
+			"requires": {
+				"lodash.castarray": "^4.4.0",
+				"lodash.isplainobject": "^4.0.6",
+				"lodash.merge": "^4.6.2"
+			}
+		},
 		"@types/crypto-js": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.1.1.tgz",
@@ -5574,6 +5618,18 @@
 			"integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==",
 			"dev": true
 		},
+		"lodash.castarray": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+			"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+			"dev": true
+		},
+		"lodash.isplainobject": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+			"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+			"dev": true
+		},
 		"lodash.merge": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -6602,6 +6658,11 @@
 			"dev": true,
 			"requires": {}
 		},
+		"svelte-icons": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/svelte-icons/-/svelte-icons-2.1.0.tgz",
+			"integrity": "sha512-rHPQjweEc9fGSnvM0/4gA3pDHwyZyYsC5KhttCZRhSMJfLttJST5Uq0B16Czhw+HQ+HbSOk8kLigMlPs7gZtfg=="
+		},
 		"svelte-markdown": {
 			"version": "0.2.2",
 			"resolved": "https://registry.npmjs.org/svelte-markdown/-/svelte-markdown-0.2.2.tgz",

webapp/package.json

@@ -15,6 +15,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "^1.0.0-next.350",
+		"@tailwindcss/typography": "^0.5.2",
 		"@types/crypto-js": "^4.1.1",
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
@@ -35,6 +36,7 @@
 	"type": "module",
 	"dependencies": {
 		"crypto-js": "^4.1.1",
+		"svelte-icons": "^2.1.0",
 		"svelte-markdown": "^0.2.2"
 	}
 }

webapp/src/lib/components/navbar/NavBar.svelte

@@ -0,0 +1,25 @@
+<script>
+	import NavBarLink from './NavBarLink.svelte';
+	import FaGithub from 'svelte-icons/fa/FaGithub.svelte';
+</script>
+
+<div id="navbar" class="h-14 border-b border-neutral-200">
+	<div
+		id="navbar-content"
+		class="h-full px-4 6xl:px-0 max-w-6xl mx-auto flex items-center justify-between content-center"
+	>
+		<div id="navbar-left" class="flex gap-8 flex">
+			<a href="/">
+				<span id="name" class="font-extrabold text-lg">[Obsidian Note Sharing]</span>
+			</a>
+			<ul class="flex gap-5 content-center">
+				<slot name="left" />
+			</ul>
+		</div>
+		<div id="navbar-right" class="flex gap-8 flex">
+			<ul class="flex gap-5 content-center">
+				<slot name="right" />
+			</ul>
+		</div>
+	</div>
+</div>

webapp/src/lib/components/navbar/NavBarLink.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let href: string = '/';
+</script>
+
+<a {href} class="self-center w-full h-full whitespace-nowrap text-neutral-600">
+	<div class="h-full flex flex-col justify-center">
+		<slot />
+	</div>
+</a>

webapp/src/routes/__layout.svelte

@@ -1,26 +1,33 @@
 <script lang="ts">
 	import Footer from '$lib/components/Footer.svelte';
+	import NavBar from '$lib/components/navbar/NavBar.svelte';
+	import NavBarLink from '$lib/components/navbar/NavBarLink.svelte';
+	import FaGithub from 'svelte-icons/fa/FaGithub.svelte';
 
 	import '../app.css';
 </script>
 
-<div id="navbar" class="h-14 border-b border-neutral-200">
+<div class="z-50 sticky top-0 w-full bg-white">
-	<div
+	<div class="top-0 left-0 right-0">
-		id="navbar-content"
+		<NavBar>
-		class="h-full max-w-6xl mx-auto flex items-center justify-between content-center"
+			<svelte:fragment slot="left">
-	>
+				<NavBarLink href="/about">About</NavBarLink>
-		<div id="navbar-left" class="flex gap-8 flex">
+				<NavBarLink href="/install">Get plugin</NavBarLink>
-			<span id="name" class="font-extrabold text-lg">[Obsidian Note Sharing]</span>
+			</svelte:fragment>
-			<ul class="flex gap-5 content-center">
+			<svelte:fragment slot="right">
-				<li class="hidden lg:block self-center">Install</li>
+				<NavBarLink href="https://github.com/mcndt/obsidian-note-sharing">
-				<li class="hidden lg:block self-center">About</li>
+					<span class="h-6 text-black"><FaGithub /></span>
-			</ul>
+				</NavBarLink>
-		</div>
+			</svelte:fragment>
-		<div id="navbar-right">test</div>
+			></NavBar
+		>
 	</div>
 </div>
 
-<div class="container mx-auto max-w-2xl mx-auto mt-6 px-4 2xl:px-0">
+<div class="container mx-auto max-w-4xl mx-auto mt-12 px-4 2xl:px-0 prose-neutral">
 	<slot />
+</div>
+
+<div class="mt-12">
 	<Footer />
 </div>

webapp/src/routes/about.svelte

@@ -0,0 +1,11 @@
+<div class="prose">
+	<h2>About</h2>
+
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+		labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+	</p>
+</div>

webapp/src/routes/index.svelte

@@ -1,42 +1 @@
-<script lang="ts" id="MathJax-script">
+<p>Homepage.</p>
-	import { onMount } from 'svelte';
-	import { AES, HmacSHA256, enc } from 'crypto-js';
-	import SvelteMarkdown from 'svelte-markdown';
-	import Heading from '$lib/renderers/Heading.svelte';
-	import List from '$lib/renderers/List.svelte';
-
-	import sample_crypto from './sample2.json';
-	let plaintext: string = '';
-
-	onMount(() => {
-		plaintext = decrypt(sample_crypto);
-	});
-
-	function handleParsed(event: any) {
-		//access tokens via event.detail.tokens
-		console.log(event.detail.tokens);
-	}
-
-	// TODO: should be same source code as used in the plugin!!
-	function decrypt(cryptData: { ciphertext: string; hmac: string; key: string }): string {
-		const hmac_calculated = HmacSHA256(cryptData.ciphertext, cryptData.key).toString();
-		const is_authentic = hmac_calculated == cryptData.hmac;
-
-		if (!is_authentic) {
-			throw Error('Cannot decrypt ciphertext with this key.');
-		}
-		const md = AES.decrypt(cryptData.ciphertext, cryptData.key).toString(enc.Utf8);
-		return md;
-	}
-</script>
-
-<div id="md-box" class="space-y-6">
-	<SvelteMarkdown
-		renderers={{ heading: Heading, list: List }}
-		source={plaintext}
-		on:parsed={handleParsed}
-	/>
-</div>
-
-<style>
-</style>

webapp/src/routes/install.svelte

@@ -0,0 +1,11 @@
+<div class="prose">
+	<h2>Installing the plugin</h2>
+
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+		labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+	</p>
+</div>

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

@@ -21,6 +21,7 @@
 	import { browser } from '$app/env';
 	import decrypt from '$lib/crypto/decrypt';
 	import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
+	import FaMarkdown from 'svelte-icons/fa/FaMarkdown.svelte';
 
 	export let note: EncryptedNote;
 	let plaintext: string;
@@ -37,10 +38,16 @@
 	});
 </script>
 
-<div class="mb-6">
+<div class="max-w-2xl mx-auto">
-	<p class="text-neutral-500">Note shared {note.insert_time.toLocaleString('en-GB')}</p>
+	<p class="mb-4 text-sm flex justify-between text-neutral-500">
-</div>
+		<span class="uppercase">Shared 7 days ago</span>
+		<button class="flex gap-2 uppercase items-center">
+			<span>Raw Markdown</span>
+			<span class="h-4"><FaMarkdown /></span>
+		</button>
+	</p>
 
-{#if plaintext}
+	{#if plaintext}
-	<MarkdownRenderer {plaintext} />
+		<MarkdownRenderer {plaintext} />
-{/if}
+	{/if}
+</div>

webapp/tailwind.config.cjs

@@ -4,5 +4,6 @@ module.exports = {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
 		extend: {}
-	}
+	},
+	plugins: [require('@tailwindcss/typography')]
 };